CSS

CSS Text White Space
المساحات البيضاء للنوص في لغة CSS

ستتعلم في هذا الدرس خاصية white-space التي تتحكم في سطور النصوص من عدمها والمساحات البيضاء بين الكلمات والتحكم في تمدد وإنكماش النصوص والسطور في لغة CSS.

التاريخ

02 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

852

المواضيع

24
الشروحات chevron_left CSS Text White Space chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Text Spacing
المساحات البيضاء للنوص في لغة CSS

</> CSS White Space
المساحات البيضاء في لغة CSS

تستخدم خاصية white-space للتحكم في إلغاء المساحات البيضاء التي تكون في نهاية كل سطر وهي عمل  scroll افقي ودمج جميع السطور في سطر واحد فقط أو العكس.

 قيم خاصية white-space في لغة CSS:
  • normal وهي الوضع الأفتراضي وهي أن تكون النصوص متمددة لسطور أخري في حال إن لم يكن لها مساحة داخل حجم العنصر وهي الموضع الأفتراضي.
  • nowrap تنكمش سطور النصوص إلي سطر واحد بدلاً من عدة سطور وإلغاء أي break line بين السطور.
  • pre تكون النصوص علي حسب وضعها داخل HTML إذا كانت ب break line فسيكون النص علي عدة سطور والعكس مثل عنصر <pre> في لغة HTML.
  • pre-line ستكون النصوص علي سطر واحد إذا كان لها مساحة وإذا لم يكون لها مساحة داخل العنصر ستتمدد إلي سطور أخري.
  • pre-wrap يتم الحفاظ على تسلسل المساحة البيضاء. يتم تقسيم الأسطر عند أحرف السطر الجديد ، عند <br> ، وعند الضرورة لملء مربعات الأسطر.


وظيفته خاصية white-space في لغة CSS:
  • عمل مسافات بيضاء وسطور عند وجود مساحة أو عدم ترك مسافات وسطور.
white-space syntax

طريقة كتابة خاصية white-space في لغة CSS.

white-space:value;
word-spacing values

قيم خاصية word-spacing في لغة CSS.

white-space:normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

</> CSS white-space with normal
خاصية white-space مع القيمة normal في لغة CSS

تًستخدم خاصية white-space مع القيمة normal  ليتم إرجاع النصوص إلي الوضع الأفتراضي وهي أن تكون متمددة لسطور أخري في حال إن لم يكن لها مساحة داخل حجم العنصر وهي الموضع الأفتراضي.

CSS white space with normal

خاصية white-space مع القيمة normal في لغة CSS.

p
{
  white-space: normal;
}
مهم
إذا قمت بتكبير وتصغير عرض صفحة الويب سوف تلاحظ تمدد وإنكماش السطور مع حجم عنصر p مع خاصية white-space بقيمة normal في لغة CSS.

</> CSS white-space with nowrap
خاصية white-space مع القيمة nowrap في لغة CSS

تًستخدم خاصية white-space مع القيمة nowrap لإلغاء أي break line لتنكمش عدة سطور إلي سطر واحد حتي وإن لم يكون هناك مساحة داخل العنصر فستتمدد النصوص خارج العنصر.

CSS white space with nowrap

خاصية white-space مع القيمة nowrap في لغة CSS.

p
{
  white-space: nowrap;
}
مهم
إذا قمت بتكبير وتصغير عرض صفحة الويب فسوف تكون السطور عبارة عن سطر واحد حتي وإن لم يكن مساحه للنصوص داخل العنصر مع القيمة nowrap.

</> CSS white space with pre
خاصية white-space مع القيمة pre في لغة CSS

تًستخدم خاصية white-space مع القيمة pre wrap ليتم الحفاظ على تسلسل المساحة البيضاء. يتم تقسيم الأسطر عند أحرف السطر الجديد ، عند <br> ، وعند الضرورة لملء مربعات الأسطر.

CSS white space with pre

خاصية white-space مع القيمة nowrap في لغة CSS.

p
{
  white-space:pre;
}

</> CSS white space with pre line
خاصية white-space مع القيمة pre line في لغة CSS

تًستخدم خاصية white-space مع القيمة pre line لعمل مساحات بيضاء عند وجود break line وعند ملئ مساحة العنصر.

CSS white space with pre line

خاصية white-space مع القيمة pre line في لغة CSS.

p
{
  white-space:pre-line;
}

</> CSS white space with pre wrap
خاصية white-space مع القيمة pre wrap في لغة CSS

تًستخدم خاصية white-space مع القيمة pre wrap ليتم الحفاظ على تسلسل المساحة البيضاء. يتم تقسيم الأسطر عند أحرف السطر الجديد ، عند <br> ، وعند الضرورة لملء مربعات الأسطر.

CSS white space with pre wrap

خاصية white-space مع القيمة pre wrap في لغة CSS.

p
{
  white-space:pre-wrap;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات