الخاصية word-break

الخاصية 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="keep-all">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
<p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>

<p class="normal">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>
<p class="break-all">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>
<p class="keep-all">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>
<p class="break-word">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>

شيفرة CSS:

.normal {
  width: 5em;
  border: 1px solid;
}

.break-all {
  width: 5em;
  border: 1px solid;
  word-break: break-all;
}

.keep-all {
  word-break: keep-all;
}

.break-word { 
  word-break: break-word; 
}

انظر إلى المثال في صفحة الخاصية 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;

 انظر أيضًا

• صفحة الخاصية white-space التي تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة.
• صفحة الخاصية overflow-wrap التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

مصادر ومواصفات

• مسودة CSS Text Module Level 3.