CSS Text White Space
المساحات البيضاء للنوص في لغة CSS
ستتعلم في هذا الدرس خاصية white-space التي تتحكم في سطور النصوص من عدمها والمساحات البيضاء بين الكلمات والتحكم في تمدد وإنكماش النصوص والسطور في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Text Spacing
المساحات البيضاء للنوص في لغة CSS
</>
CSS White Space
المساحات البيضاء في لغة CSS
- normal وهي الوضع الأفتراضي وهي أن تكون النصوص متمددة لسطور أخري في حال إن لم يكن لها مساحة داخل حجم العنصر وهي الموضع الأفتراضي.
- nowrap تنكمش سطور النصوص إلي سطر واحد بدلاً من عدة سطور وإلغاء أي break line بين السطور.
- pre تكون النصوص علي حسب وضعها داخل HTML إذا كانت ب break line فسيكون النص علي عدة سطور والعكس مثل عنصر <pre> في لغة HTML.
- pre-line ستكون النصوص علي سطر واحد إذا كان لها مساحة وإذا لم يكون لها مساحة داخل العنصر ستتمدد إلي سطور أخري.
- pre-wrap يتم الحفاظ على تسلسل المساحة البيضاء. يتم تقسيم الأسطر عند أحرف السطر الجديد ، عند <br> ، وعند الضرورة لملء مربعات الأسطر.
- عمل مسافات بيضاء وسطور عند وجود مساحة أو عدم ترك مسافات وسطور.
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;
}
مهم
</>
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;
}
مهم
</>
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
