الفرق بين المراجعتين لصفحة: «CSS/word-break»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>word-break</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>word-break</code>}}</noinclude> | ||
الخاصية <code>word-break</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code>، ستنتقل الخاصية <code>word-break</code> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى. | الخاصية <code>word-break</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code>، ستنتقل الخاصية <code>word-break</code> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 29: | سطر 21: | ||
|} | |} | ||
= أمثلة = | <syntaxhighlight lang="css"> | ||
/* كلمات محجوزة */ | |||
word-break: normal; | |||
word-break: break-all; | |||
word-break: keep-all; | |||
/* قيم عامة */ | |||
word-break: inherit; | |||
word-break: initial; | |||
word-break: unset; | |||
</syntaxhighlight> | |||
== أمثلة == | |||
مثال عن استخدام الكلمة المحجوزة <code>normal</code> و <code>break-all</code> على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):<syntaxhighlight lang="html"> | مثال عن استخدام الكلمة المحجوزة <code>normal</code> و <code>break-all</code> على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):<syntaxhighlight lang="html"> | ||
<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> | <p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> | ||
| سطر 76: | سطر 80: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>word-break</code> إحدى الكلمات المحجوزة التالية. | تقبل الخاصية <code>word-break</code> إحدى الكلمات المحجوزة التالية. | ||
=== | === <code>normal</code> === | ||
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين). | سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين). | ||
=== | === <code>break-all</code> === | ||
يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى. | يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى. | ||
=== | === <code>keep-all</code> === | ||
قيمة خاصة تُطبَّق على النصوص الصينية أو اليابانية أو الكورية، وإذا استعملناها على نصوص أخرى فلها أثر الكلمة المحجوزة <code>normal</code>. | قيمة خاصة تُطبَّق على النصوص الصينية أو اليابانية أو الكورية، وإذا استعملناها على نصوص أخرى فلها أثر الكلمة المحجوزة <code>normal</code>. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 10:49، 27 يوليو 2018
الخاصية word-break في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية overflow-wrap، ستنتقل الخاصية word-break إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.
بطاقة الخاصية
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدت. |
/* كلمات محجوزة */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* قيم عامة */
word-break: inherit;
word-break: initial;
word-break: unset;
أمثلة
مثال عن استخدام الكلمة المحجوزة normal و break-all على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):
<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="break-all">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="normal">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>
<p class="break-all">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>
شيفرة CSS:
.normal {
width: 5em;
border: 1px solid;
}
.break-all {
width: 5em;
border: 1px solid;
word-break: break-all;
}
انظر إلى المثال في صفحة الخاصية overflow-wrap لتمييز الفرق بين الخاصيتين.
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 15.0 | 5.5 | 15 | مدعومة |
| keep-all | 44 | 15.0 | 5.5 | 31 | 9 |
متصفح Edge لا يدعم الكلمة المحجوزة keep-all.
البنية العامة
تقبل الخاصية word-break إحدى الكلمات المحجوزة التالية.
normal
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين).
break-all
يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى.
keep-all
قيمة خاصة تُطبَّق على النصوص الصينية أو اليابانية أو الكورية، وإذا استعملناها على نصوص أخرى فلها أثر الكلمة المحجوزة normal.
البنية الرسمية
word-break: normal | break-all | keep-all;
مصادر ومواصفات
- مسودة CSS Text Module Level 3.