الفرق بين المراجعتين ل"CSS/white-space"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>white-space</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>white-space</code>}}</noinclude> | ||
| − | الخاصية <code>white-space</code> في CSS تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة، فانظر إلى خاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> و <code>[[CSS/word-break|word-break]]</code>. | + | الخاصية <code>white-space</code> في CSS تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة، فانظر إلى خاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> و <code>[[CSS/word-break|word-break]]</code>. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 30: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* كلمات محجوزة */ | ||
| + | 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; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 104: | سطر 108: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>white-space</code> إحدى الكلمات المحجوزة الآتية التالية. | تقبل الخاصية <code>white-space</code> إحدى الكلمات المحجوزة الآتية التالية. | ||
| − | === | + | === <code>normal</code> === |
ستُدمَج الفراغات البيضاء المتتالية مع بعضها، وستُعامل محارف الانتقال إلى سطرٍ جديدٍ كغيرها من الفراغات البيضاء. | ستُدمَج الفراغات البيضاء المتتالية مع بعضها، وستُعامل محارف الانتقال إلى سطرٍ جديدٍ كغيرها من الفراغات البيضاء. | ||
| − | === | + | === <code>nowrap</code> === |
ستُدمَج الفراغات البيضاء المتتالية مع بعضها كما في الكلمة المحجوزة <code>normal</code>، لكن مع تجاهل الأسطر الجديدة في الشيفرة المصدرية. | ستُدمَج الفراغات البيضاء المتتالية مع بعضها كما في الكلمة المحجوزة <code>normal</code>، لكن مع تجاهل الأسطر الجديدة في الشيفرة المصدرية. | ||
| − | === | + | === <code>pre</code> === |
سيُحافظ على الفراغات البيضاء، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code>. | سيُحافظ على الفراغات البيضاء، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code>. | ||
| − | === | + | === <code>pre-wrap</code> === |
سيُحافظ على الفراغات البيضاء، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code>، وعند الحاجة كي لا يخرج المحتوى من صندوق العنصر. | سيُحافظ على الفراغات البيضاء، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code>، وعند الحاجة كي لا يخرج المحتوى من صندوق العنصر. | ||
| − | === | + | === <code>pre-line</code> === |
ستُدمَج الفراغات البيضاء المتتالية مع بعضها، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code>، وعند الحاجة كي لا يخرج المحتوى من صندوق العنصر. | ستُدمَج الفراغات البيضاء المتتالية مع بعضها، وسيُنتَقَل إلى الأسطر الجديدة عند ورود محرف السطر الجديد في الشيفرة المصدرية أو عند عناصر <code>[[HTML/br|<nowiki><br></nowiki>]]</code>، وعند الحاجة كي لا يخرج المحتوى من صندوق العنصر. | ||
مراجعة 10:46، 27 يوليو 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;
مصادر ومواصفات
- مسودة CSS Text Module Level 3.
- مواصفة CSS Level 2 (Revision 1).