الفرق بين المراجعتين لصفحة: «CSS/word-break»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>word-break</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>word-break</code>}}</noinclude> | ||
الخاصية <code>word-break</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code>، ستنتقل الخاصية <code>word-break</code> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى. | الخاصية <code>word-break</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code>، ستنتقل الخاصية <code>word-break</code> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 29: | سطر 21: | ||
|} | |} | ||
= أمثلة = | <syntaxhighlight lang="css"> | ||
/* كلمات محجوزة */ | |||
word-break: normal; | |||
word-break: break-all; | |||
word-break: keep-all; | |||
/* قيم عامة */ | |||
word-break: inherit; | |||
word-break: initial; | |||
word-break: unset; | |||
</syntaxhighlight> | |||
== أمثلة == | |||
مثال عن استخدام الكلمة المحجوزة <code>normal</code> و <code>break-all</code> على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):<syntaxhighlight lang="html"> | مثال عن استخدام الكلمة المحجوزة <code>normal</code> و <code>break-all</code> على فقرتين، إحداهما بالألمانية (فيها كلمة طويلة جدًا)، والأخرى بالعربية (فيها أطول كلمة عربية):<syntaxhighlight lang="html"> | ||
<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> | <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="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="normal">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p> | ||
<p class="break-all">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p> | <p class="break-all">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p> | ||
<p class="keep-all">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p> | |||
<p class="break-word">أطول كلمة في اللغة العربية هي أفاستسقيناكموها</p> | |||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 47: | سطر 55: | ||
border: 1px solid; | border: 1px solid; | ||
word-break: break-all; | word-break: break-all; | ||
} | |||
.keep-all { | |||
word-break: keep-all; | |||
} | |||
.break-word { | |||
word-break: break-word; | |||
} | } | ||
</syntaxhighlight>انظر إلى [[CSS/overflow-wrap#أمثلة|المثال]] في صفحة الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> لتمييز الفرق بين الخاصيتين. | </syntaxhighlight>انظر إلى [[CSS/overflow-wrap#أمثلة|المثال]] في صفحة الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> لتمييز الفرق بين الخاصيتين. | ||
| سطر 76: | سطر 92: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>word-break</code> إحدى الكلمات المحجوزة التالية. | تقبل الخاصية <code>word-break</code> إحدى الكلمات المحجوزة التالية. | ||
=== | === <code>normal</code> === | ||
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين). | سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين). | ||
=== | === <code>break-all</code> === | ||
يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى. | يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى. | ||
=== | === <code>keep-all</code> === | ||
قيمة خاصة تُطبَّق على النصوص الصينية أو اليابانية أو الكورية، وإذا استعملناها على نصوص أخرى فلها أثر الكلمة المحجوزة <code>normal</code>. | قيمة خاصة تُطبَّق على النصوص الصينية أو اليابانية أو الكورية، وإذا استعملناها على نصوص أخرى فلها أثر الكلمة المحجوزة <code>normal</code>. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 87: | سطر 103: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر ومواصفات == | == انظر أيضًا == | ||
*صفحة الخاصية <code>[[CSS/white-space|white-space]]</code> التي تُحدِّد كيف ستُعامل الفراغات ضمن العنصر؛ أما إذا كنتَ تبحث عن طريقة تقسيم الكلمات الطويلة. | |||
*صفحة الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code> التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. | |||
==مصادر ومواصفات== | |||
* مسودة [https://drafts.csswg.org/css-text-3/#word-break-property CSS Text Module Level 3]. | * مسودة [https://drafts.csswg.org/css-text-3/#word-break-property CSS Text Module Level 3]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Text]] | [[تصنيف:CSS Text|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 08:33، 13 أغسطس 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="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.