الفرق بين المراجعتين لصفحة: «CSS/white-space»

المراجعة الحالية بتاريخ 07:27، 12 أغسطس 2018

الخاصية 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)‎.