CSS/white-space

الخاصية 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 التي تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

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

• مسودة CSS Text Module Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.