الفرق بين المراجعتين ل"CSS/word-break"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
(3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 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> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.<nowiki/><syntaxhighlight lang="css">
+
الخاصية <code>word-break</code> في CSS تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه. وعلى النقيض من الخاصية <code>[[CSS/overflow-wrap|overflow-wrap]]</code>، ستنتقل الخاصية <code>word-break</code> إلى سطرٍ جديد عند المكان الذي كان سيتجاوز النص فيه حدود صندوق المحتوى، حتى لو كان وضع الكلمة في سطرٍ بمفردها سيؤدي إلى عدم تجاوزها حدود صندوق المحتوى.
−
/* كلمات محجوزة */
 
−
word-break: normal;
 
−
word-break: break-all;
 
−
word-break: keep-all;
 
  
−
/* قيم عامة */
+
== بطاقة الخاصية ==
−
word-break: inherit;
 
−
word-break: initial;
 
−
word-break: unset;
 
−
</syntaxhighlight>
 
 
{| 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>normal</code> ===
 
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين).
 
سيتم الانتقال إلى سطرٍ جديد عند مواضع المحددة (مثل الفراغ بين الكلمتين).
−
=== القيمة <code>break-all</code> ===
+
=== <code>break-all</code> ===
 
يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى.
 
يمكن الانتقال إلى سطر جديد بين أيّ حرفين تجنبًا لخروج النص من صندوق المحتوى.
−
=== القيمة <code>keep-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|{{SUBPAGENAME}}]]
 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
 
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
 
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
 
[[تصنيف:CSS Text|{{SUBPAGENAME}}]]
 
[[تصنيف: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 التي حدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع النص من تجاوز حدود صندوق المحتوى للعنصر الحاوي عليه.

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

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS/word-break&oldid=14903"