حل مشكلة الأرقام والحروف مما يجعل الحاوية أكبر

مشكلة التفاف الأسطر تلقائيًا، يعد التفاف الأسطر للأحرف العادية أكثر منطقية، لكن الأرقام المستمرة والأحرف الإنجليزية غالبًا ما تعمل على توسيع الحاوية، وهو ما يمثل صداعًا كبيرًا فيما يلي كيفية تنفيذ التفاف الأسطر في CSS.

بالنسبة للعناصر على مستوى الكتلة مثل div وp، فإن التفاف سطر عناصر النص العادي (النص الآسيوي والنص غير الآسيوي) له مسافة بيضاء افتراضية: عادي، وسيتم التفافه تلقائيًا بعد العرض المحدد.
أتش تي أم أل
<div id="wrap">تحتوي عناصر التفاف النص العادي (النص الآسيوي وغير الآسيوي) على المسافة البيضاء الافتراضية: عادية، عند تعريفها</div>
المغلق
#wrap{مسافة بيضاء: عرض عادي: 200 بكسل }

1. (متصفح IE) بالنسبة للأحرف الإنجليزية المستمرة والأرقام العربية، استخدم التفاف الكلمات: كلمة فاصلة أو كلمة فاصل: كسر الكل؛
#wrap{word-break:break-all width:200px;}
أو
#wrap{word-wrap:break-word width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
التأثير: يمكن تحقيق فواصل الأسطر

2. (متصفح Firefox) فواصل الأسطر للأحرف الإنجليزية المستمرة والأرقام العربية لا تحل جميع إصدارات Firefox هذه المشكلة، يمكننا فقط إخفاء الأحرف التي تتجاوز الحدود أو إضافة أشرطة التمرير إلى الحاوية.

#wrap{word-break:break-all width:200px;
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
التأثير: الحاوية عادية والمحتوى مخفي للجدول
(1) (متصفح IE) استخدم تخطيط الجدول: ثابت؛ لفرض عرض الجدول وإخفاء المحتوى الزائد
<نمط الجدول = "تخطيط الجدول: ثابت" العرض = "200">
<تر>
<td>abcdefghigklmnopqrstuvwxyz1234567890سسسسسسسسسسسسس
</TD>
</tr>
</الجدول>
التأثير: إخفاء المحتوى الزائد
(2) (متصفح IE) استخدم تخطيط الجدول: ثابت لفرض عرض الجدول، استخدم فاصل الكلمات: كسر الكل أو التفاف الكلمات: فاصل سطر؛
<عرض الجدول = "200" نمط = "تخطيط الجدول: ثابت؛">
<تر>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
<td style ="word-wrap : كسر الكلمة ;">abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
</tr>
</الجدول>
التأثير: يمكن عمل فواصل الأسطر

3. (متصفح IE) عند تداخل div وp وما إلى ذلك في td وth، استخدم طريقة التفاف السطر div وp المذكورة أعلاه.

4. (متصفح Firefox) استخدم تخطيط الجدول: ثابت؛ لفرض عرض الجدول، يستخدم td الداخلي فاصل الكلمات: كسر الكل أو التفاف الكلمات: التفاف الأسطر؛ مخفي؛ للإخفاء خارج المحتوى، لا يمكن أن يعمل overflow:auto;

<نمط الجدول = "تخطيط الجدول: ثابت" العرض = "200">
<تر>
<td width="25%" style="word-break : Break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : Break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</الجدول>
التأثير: إخفاء أكثر من محتوى

5. (متصفح Firefox) Nest div وp وما إلى ذلك في td وth وما إلى ذلك استخدم الطريقة المذكورة أعلاه للتعامل مع Firefox