الفرق بين المراجعتين لصفحة: «CSS/overflow-wrap»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
طلا ملخص تعديل |
||
| (مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-wrap</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>overflow-wrap</code>}}</noinclude> | ||
الخاصية <code>overflow-wrap</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. | الخاصية <code>overflow-wrap</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 27: | سطر 20: | ||
|كما حُدِّدت. | |كما حُدِّدت. | ||
|} | |} | ||
وعلى النقيض من الخاصية <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> تُشير إليها. | |||
== أمثلة == | == أمثلة == | ||
| سطر 73: | سطر 77: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>overflow-wrap</code> إحدى الكلمتين المحجوزتين التاليتين | تقبل الخاصية <code>overflow-wrap</code> إحدى الكلمتين المحجوزتين التاليتين: | ||
=== | === <code>normal</code> === | ||
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين). | سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين). | ||
=== | === <code>break-word</code> === | ||
لمنع خروج النص عن صندوق المحتوى، فسيتم الانتقال إلى سطر جديد في الكلمات التي لا تُقسَم عادةً، وذلك إذا لم تكن هنالك مواضع آخر مقبولة للانتقال إلى سطرٍ جديد في نفس السطر (أي أنَّ الكلمة الطويلة في سطرٍ بمفردها). | لمنع خروج النص عن صندوق المحتوى، فسيتم الانتقال إلى سطر جديد في الكلمات التي لا تُقسَم عادةً، وذلك إذا لم تكن هنالك مواضع آخر مقبولة للانتقال إلى سطرٍ جديد في نفس السطر (أي أنَّ الكلمة الطويلة في سطرٍ بمفردها). | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 83: | سطر 87: | ||
</syntaxhighlight> | </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]. | * مسودة [https://drafts.csswg.org/css-text-3/#propdef-overflow-wrap CSS Text Module Level 3]. | ||
المراجعة الحالية بتاريخ 10:09، 16 نوفمبر 2024
الخاصية 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.