CSS/overflow-wrap

الخاصية overflow-wrap في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

بطاقة الخاصية

القيمة الابتدائية	normal
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدت.

وعلى النقيض من الخاصية word-break، ستنتقل الخاصية overflow-wrap إلى سطرٍ جديد إذا لم يتمكن المتصفح من وضع الكلمة في سطرٍ بمفردها دون تجاوز حدود صندوق المحتوى.

/* كلمات محجوزة */
overflow-wrap: normal;
overflow-wrap: break-word;

/* قيم عامة */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

كانت هذه الخاصية غير قياسية ومستعملة في متصفح IE باسم word-wrap، وأغلبية المتصفحات قد أضافتها بنفس الاسم، لكن أُعيدت تسميتها لاحقًا إلى overflow-wrap وأمست الخاصية word-wrap تُشير إليها.

أمثلة

مثال عن استخدام الكلمة المحجوزة normal و break-word على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):

<p class="normal">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-word">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p>

شيفرة CSS:

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

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

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (باسم word-wrap)	1.0	3.5	5.5	10.5	1.0
overflow-wrap	49	مدعومة	غير مدعومة	مدعومة	مدعومة

البنية العامة

تقبل الخاصية overflow-wrap إحدى الكلمتين المحجوزتين التاليتين:

normal

سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين).

break-word

لمنع خروج النص عن صندوق المحتوى، فسيتم الانتقال إلى سطر جديد في الكلمات التي لا تُقسَم عادةً، وذلك إذا لم تكن هنالك مواضع آخر مقبولة للانتقال إلى سطرٍ جديد في نفس السطر (أي أنَّ الكلمة الطويلة في سطرٍ بمفردها).

البنية الرسمية

overflow-wrap: normal | break-word;

 انظر أيضًا

• صفحة الخاصية  line-height التي تضبط المسافة المستخدم للأسطر.
• صفحة الخاصية  letter-spacing التي تُحدِّد ما هو التباعد بين الأحرف النصية.

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

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