الفرق بين المراجعتين لصفحة: «CSS/word-break»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 89: | سطر 89: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-text-3/#word-break-property CSS Text Module Level 3]. | * مسودة [https://drafts.csswg.org/css-text-3/#word-break-property CSS Text Module Level 3]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text]] | [[تصنيف:CSS Text|{{SUBPAGENAME}}]] | ||
مراجعة 15:34، 28 يناير 2018
الخاصية word-break في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية overflow-wrap، ستنتقل الخاصية word-break إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.
/* كلمات محجوزة */
word-break: normal;
word-break: break-all;
word-break: keep-all;
/* قيم عامة */
word-break: inherit;
word-break: initial;
word-break: unset;
| القيمة الابتدائية | normal
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | نعم |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدت. |
أمثلة
مثال عن استخدام الكلمة المحجوزة 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.