لكن
الأرقام المستمرة والأحرف الإنجليزية غالبًا ما تعمل على توسيع الحاوية، وهو أمر مزعج للغاية فيما يلي كيفية تنفيذ CSS لالتفاف الأسطر
.
تخطيط الجدول: ثابت؛ فاصل الكلمات: كسر الكل؛
هنا الفائض: مخفي أو تلقائي؛
================================================================================================== ==============
بالنسبة للعناصر على مستوى الكتلة مثل div وp، فإن التفاف سطر عناصر النص العادي (النص الآسيوي والنص غير الآسيوي) له مسافة بيضاء افتراضية: عادي، وسيتم التفافه تلقائيًا بعد العرض المحدد.
أتش تي أم أل
<div id="wrap">تحتوي عناصر التفاف النص العادي (النص الآسيوي وغير الآسيوي) على المسافة البيضاء الافتراضية: عادية، عند تعريفها</div>
المغلق
#wrap{white-space:normal; width:200px; }
1. (متصفح IE) للأحرف الإنجليزية المستمرة والأرقام العربية، استخدم word-wrap:break-word; كسر
#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; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
التأثير: الحاوية عادية والمحتوى مخفي
للجدول
http://www.knowsky.com/
1. (متصفح IE) استخدم table-layout:fixed لفرض عرض الجدول وإخفاء المحتوى الزائد
<table style="table-layout:fixed" width="200">
<تر>
<td>abcdefghigklmnopqrstuvwxyz1234567890سسسسسسسسسسسسس
</TD>
</tr>
</table>
التأثير: إخفاء المحتوى الزائد
2. (متصفح IE) استخدم تخطيط الجدول: ثابت لفرض عرض الجدول، يستخدم td الداخلي فاصل الكلمات: كسر الكل أو التفاف الكلمات: فاصل -كلمة؛ فاصل أسطر
<عرض الجدول = "200" نمط = "تخطيط الجدول: ثابت؛">
<تر>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
<td style ="word-wrap : كسر الكلمة ;">abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
</tr>
</table>
التأثير: التفاف الخط ممكن
3. (متصفح IE) تداخل divs و p وما إلى ذلك في td، يستخدم طريقة التفاف الخط div و p المذكورة أعلاه
4. (متصفح Firefox) استخدم تخطيط الجدول: ثابت ؛ لفرض عرض الجدول، يستخدم td الداخلي فاصل الكلمات: كسر الكل أو التفاف الكلمات: كسر الكلمة؛ لا يعمل هنا
<نمط الجدول = "تخطيط الجدول: ثابت" العرض = "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>
</table>
التأثير: إخفاء أكثر من محتوى
5. (متصفح Firefox) Nest div، p، إلخ في td، th. استخدم الطريقة المذكورة أعلاه للتعامل مع Firefox لتشغيل مربع التعليمات البرمجية، أخيرًا، فرصة حدوث هذه الظاهرة حدوثها صغير جدًا، ولكن لا يمكن استبعاد المزح من قبل مستخدمي الإنترنت.
ما يلي هو تأثير المثال المذكور
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. دي تي دي ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>التفاف سطر الحرف</title>
<نمط النوع = "نص/CSS">
جدول، td، th، div { الحدود: 1 بكسل أخضر صلب؛}
الكود { عائلة الخط: "Courier New"، Courier، monospace؛}
</نمط>
</الرأس>
<الجسم>
<h1><code>div</code></h1>
<h1><code>كل المسافات البيضاء:عادية;</code></h1>
<div style="white-space:normal; width:200px;">لا يزال التفاف الكلمات يحدث في عنصر td الذي تم تعيين سمة WIDTH الخاصة به على قيمة أصغر من المحتوى غير المغلف للخلية، حتى إذا تم تعيين خاصية noWrap على صحيح، لذلك، فإن سمة WIDTH لها الأسبقية على خاصية noWrap في هذا السيناريو</div>
<h1><code>IE word-wrap :break-word ;</code></h1>.
<div style="word-wrap : Break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE فاصل الكلمات:فاصل الكل;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>فايرفوكس/ word-break:break-all; ح1>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>الجدول</code></h1>
<h1><code>تخطيط الجدول:ثابت;</code></h1>
<نمط الجدول = "تخطيط الجدول: ثابت" العرض = "200">
<تر>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</الجدول>
<h1><code>تخطيط الجدول: ثابت؛ فاصل الكلمات: التفاف الكل؛ </code></h1>
<عرض الجدول = "200" نمط = "تخطيط الجدول: ثابت؛">
<تر>
<td width="25%" style="word-break :break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : Break-word ;">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss</td>
</tr>
</الجدول>
<h1><code>FF table-layout:fixed:hidden;</code></h1>
<نمط الجدول = "تخطيط الجدول: ثابت" العرض = "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>
</الجدول>
</الجسم>
</html>