مشكلة التفاف الأسطر تلقائيًا، يعد التفاف الأسطر للأحرف العادية أكثر منطقية، لكن الأرقام المستمرة والأحرف الإنجليزية غالبًا ما تعمل على توسيع الحاوية، وهو ما يمثل صداعًا كبيرًا فيما يلي كيفية تنفيذ التفاف الأسطر في CSS. أفضل CSS لتحديد فواصل الأسطر .wrap { تخطيط الجدول: ثابت؛ فاصل الكل: فاصل؛ 1. (متصفح IE) بالنسبة للأحرف الإنجليزية المستمرة والأرقام العربية، استخدم التفاف الكلمات: كلمة فاصلة أو كلمة فاصل: كسر الكل؛ #wrap{word-break:break-all width:200px;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> التأثير: يمكن تحقيق فواصل الأسطر 2. (متصفح Firefox) فواصل الأسطر للأحرف الإنجليزية المستمرة والأرقام العربية لا تحل جميع إصدارات Firefox هذه المشكلة، يمكننا فقط إخفاء الأحرف التي تتجاوز الحدود أو إضافة أشرطة التمرير إلى الحاوية. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> التأثير: الحاوية عادية والمحتوى مخفي للجدول <نمط الجدول = "تخطيط الجدول: ثابت" العرض = "200"> التأثير: إخفاء المحتوى الزائد 2. (متصفح IE) استخدم تخطيط الجدول: ثابت؛ لفرض عرض الجدول، ويستخدم td الداخلي فاصل الكلمات: كسر الكل أو التفاف الكلمات: سطر جديد؛ <عرض الجدول = "200" نمط = "تخطيط الجدول: ثابت؛"> التأثير: يمكن عمل فواصل الأسطر 3. (متصفح IE) عند تداخل div وp وما إلى ذلك في td وth، استخدم طريقة التفاف السطر div وp المذكورة أعلاه. 4. (متصفح Firefox) استخدم تخطيط الجدول: ثابت؛ لفرض عرض الجدول، يستخدم td الداخلي فاصل الكلمات: كسر الكل أو التفاف الكلمات: التفاف الأسطر؛ مخفي؛ للإخفاء خارج المحتوى، لا يمكن أن يعمل overflow:auto; التأثير: إخفاء أكثر من محتوى 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.dtd"> <h1><code>IE word-wrap : كسر الكلمة ;</code></h1> <h1><code>فايرفوكس/ word-break:break-all;
هنا الفائض: مخفي أو تلقائي؛
================================================================================================== ==============
بالنسبة للعناصر على مستوى الكتلة مثل div وp، فإن التفاف سطر عناصر النص العادي (النص الآسيوي والنص غير الآسيوي) له مسافة بيضاء افتراضية: عادي، وسيتم التفافه تلقائيًا بعد العرض المحدد.
أتش تي أم أل
<div id="wrap">تحتوي عناصر التفاف النص العادي (النص الآسيوي وغير الآسيوي) على المسافة البيضاء الافتراضية: عادية، عند تعريفها</div>
المغلق
#wrap{مسافة بيضاء: عرض عادي: 200 بكسل }
أو
#wrap{word-wrap:break-word width:200px;}
#wrap{word-break:break-all width:200px;
1. (متصفح IE) استخدم تخطيط الجدول: ثابت؛ لفرض عرض الجدول وإخفاء المحتوى الزائد
<تر>
<td>abcdefghigklmnopqrstuvwxyz1234567890سسسسسسسسسسسسس
</TD>
</tr>
</الجدول>
<تر>
<td width="25%" style="word-break : Break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
<td style ="word-wrap : كسر الكلمة ;">abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
</tr>
</الجدول>
<نمط الجدول = "تخطيط الجدول: ثابت" العرض = "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 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>
<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>
<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>