الخاصية word-break

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