الخاصية white-space

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية white-space في CSS تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة، فانظر إلى خاصية overflow-wrap و word-break.

بطاقة الخاصية

القيمة الابتدائية normal
تُطبَّق على جميع العناصر.
قابلة للوراثة نعم.
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.
/* كلمات محجوزة */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* قيم عامة */
white-space: inherit;
white-space: initial;
white-space: unset;

أمثلة

سنستخدم في هذا المثال العنصر <p> لإضافة فقرة فيها عدِّة فراغات عادية متتالية (موجودة بين اسم الخاصية white-space وقيمتها في عنصر <code>)، ومسافات جدولة (tab) في بداية بعض الأسطر، وأسطر جديدة:
<p><code>white-space:     normal;</code>
div {
	padding: 2em;
	margin: 2em;
	border: solid 10px;
	border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}</p>
<p class="nowrap"><code>white-space:     nowrap;</code>
div {
	padding: 2em;
	margin: 2em;
	border: solid 10px;
	border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}</p>
<p class="pre"><code>white-space:     pre;</code>
div {
	padding: 2em;
	margin: 2em;
	border: solid 10px;
	border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}</p>
<p class="pre-wrap"><code>white-space:     pre-wrap;</code>
div {
	padding: 2em;
	margin: 2em;
	border: solid 10px;
	border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}</p>
<p class="pre-line"><code>white-space:     pre-line;</code>
div {
	padding: 2em;
	margin: 2em;
	border: solid 10px;
	border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}</p>
شيفرة CSS:
p {
  width: 10em;
  border: 1px solid;
}
.nowrap   { white-space: nowrap; }
.pre      { white-space: pre; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 3.55 8.0 9.5 3.0
الدعم في عنصر <textarea> 1.0 36 5.5 4.0 3.0

البنية العامة

تقبل الخاصية white-space إحدى الكلمات المحجوزة الآتية التالية.

normal

ستُدمَج الفراغات البيضاء المتتالية مع بعضها، وستُعامل محارف الانتقال إلى سطرٍ جديدٍ كغيرها من الفراغات البيضاء.

nowrap

ستُدمَج الفراغات البيضاء المتتالية مع بعضها كما في الكلمة المحجوزة normal، لكن مع تجاهل الأسطر الجديدة في الشيفرة المصدرية.

pre

سيُحافظ على الفراغات البيضاء، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <br>.

pre-wrap

سيُحافظ على الفراغات البيضاء، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <br>، وعند الحاجة كي لا يخرج المحتوى من صندوق العنصر.

pre-line

ستُدمَج الفراغات البيضاء المتتالية مع بعضها، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <br>، وعند الحاجة كي لا يخرج المحتوى من صندوق العنصر.

الجدول الآتية يلخص سلوك مختلف القيم التي تقبلها الخاصية white-space:

الأسطر الجديدة الفراغات (space و tab) التفاف النص
normal ستُدمَج ستُدمَج سيلتف
nowrap ستُدمَج ستُدمَج لن يلتف
pre سيُحافظ عليها سيُحافظ عليها لن يلتف
pre-wrap سيُحافظ عليها سيُحافظ عليها سيلتف
pre-line سيُحافظ عليها ستُدمَج سيلتف

البنية الرسمية

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

انظر أيضًا

  • صفحة الخاصية overflow-wrap التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.
  • صفحة الخاصية word-break التي تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

مصادر ومواصفات