عرض مصدر CSS/overflow-wrap

<noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-wrap</code>}}</noinclude>
الخاصية <code>overflow-wrap</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>normal</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|نعم
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدت.
|}
  
وعلى النقيض من الخاصية <code>[[CSS/word-break|word-break]]</code>، ستنتقل الخاصية <code>overflow-wrap</code> إلى سطرٍ جديد إذا لم يتمكن المتصفح من وضع الكلمة في سطرٍ بمفردها دون تجاوز حدود صندوق المحتوى.<syntaxhighlight lang="css">
/* كلمات محجوزة */
overflow-wrap: normal;
overflow-wrap: break-word;

/* قيم عامة */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;
</syntaxhighlight>كانت هذه الخاصية غير قياسية ومستعملة في متصفح IE باسم <code>word-wrap</code>، وأغلبية المتصفحات قد أضافتها بنفس الاسم، لكن أُعيدت تسميتها لاحقًا إلى <code>overflow-wrap</code> وأمست الخاصية <code>word-wrap</code> تُشير إليها.

== أمثلة ==
مثال عن استخدام الكلمة المحجوزة <code>normal</code> و <code>break-word</code> على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):<syntaxhighlight lang="html">
<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>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.normal {
  width: 5em;
  border: 1px solid;
}

.break-word {
  width: 5em;
  border: 1px solid;
  overflow-wrap: break-word;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي (باسم word-wrap)
|1.0
|3.5
|5.5
|10.5
|1.0
|-
!overflow-wrap
|49
|مدعومة
|غير مدعومة
|مدعومة
|مدعومة
|}

== البنية العامة ==
تقبل الخاصية <code>overflow-wrap</code> إحدى الكلمتين المحجوزتين التاليتين.
===  <code>normal</code> ===
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين).
=== <code>break-word</code> ===
لمنع خروج النص عن صندوق المحتوى، فسيتم الانتقال إلى سطر جديد في الكلمات التي لا تُقسَم عادةً، وذلك إذا لم تكن هنالك مواضع آخر مقبولة للانتقال إلى سطرٍ جديد في نفس السطر (أي أنَّ الكلمة الطويلة في سطرٍ بمفردها).
=== البنية الرسمية ===
<syntaxhighlight lang="css">
overflow-wrap: normal | break-word;

</syntaxhighlight>
==  انظر أيضًا ==
* صفحة الخاصية  <code>[[CSS/line-height|line-height]]</code> التي تضبط المسافة المستخدم للأسطر.
* صفحة الخاصية  <code>[[CSS/letter-spacing|letter-spacing]]</code> التي تُحدِّد ما هو التباعد بين الأحرف النصية.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap CSS Text Module Level 3]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Text|{{SUBPAGENAME}}]]