الفرق بين المراجعتين لصفحة: «CSS/word-break»

مراجعة 07:30، 12 أغسطس 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;

انظر أيضًا

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

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

مسودة CSS Text Module Level 3.

@@ سطر 91: / سطر 91: @@
 </syntaxhighlight>
-== مصادر ومواصفات ==
+==  انظر أيضًا ==
+*صفحة الخاصية <code>[[CSS/white-space|white-apace]]</code> التي تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة.
+*صفحة الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.
+==مصادر ومواصفات==
 * مسودة [https://drafts.csswg.org/css-text-3/#word-break-property CSS Text Module Level 3].
 [[تصنيف:CSS|{{SUBPAGENAME}}]]
 [[تصنيف:CSS Property|{{SUBPAGENAME}}]]
 [[تصنيف:CSS Text|{{SUBPAGENAME}}]]