نصائح لتحقيق التفاف الخط التلقائي باستخدام CSS

يعلم الجميع أن اللغة الإنجليزية أو الأرقام المستمرة يمكن أن تجعل الحاوية تتوسع ولا يمكن تغليفها تلقائيًا وفقًا لحجم الحاوية، وإليك كيفية تغليفها باستخدام CSS!

لشعبة

1. (متصفح IE) مسافة بيضاء: عادية فاصل الكلمات: فاصل الكل؛

#wrap{مسافة بيضاء: عرض عادي: 200 بكسل }
أو
#wrap{كلمة فاصل:كسر الكل؛العرض:200px؛}
<div id="wrap">ddd1111111111111111111111</div>

التأثير: يمكن تحقيق فواصل الأسطر

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

#wrap{مسافة بيضاء: عرض عادي: 200 بكسل؛}
أو
#wrap{word-break:break-all;width:200px;
<div id="wrap">ddd111111111111111111111111111111</div>

التأثير: الحاوية عادية والمحتوى مخفي

للجدول

1. (متصفح IE) استخدم نمط جدول التخطيط: ثابت؛

<نمط>
.tb{تخطيط الجدول: ثابت}
</نمط>
<فئة الجدول = "tbl" العرض = "80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</الجدول>

التأثير: يمكن التفاف الأسطر 2. (متصفح IE) استخدم النمط

<نمط>
.tb {تخطيط الجدول: ثابت}
</نمط>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</الجدول>

التأثير: يمكن عمل فواصل الأسطر

3. (متصفح IE) استخدم تخطيط جدول النمط: ثابت وnowrap عند استخدام نسبة مئوية لإصلاح حجم td.

<نمط>
.tb{تخطيط الجدول: ثابت}
</نمط>
<فئة الجدول = "تب" العرض = 80>
<تر>
<عرض td=25% الآن>
abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</الجدول>

التأثير: يلتف كلا TDs بشكل طبيعي

4. (متصفح Firefox) استخدم تخطيط جدول النمط: ثابت وnowrap عند استخدام النسبة المئوية لإصلاح حجم td، واستخدم div

<نمط>
.tb {تخطيط الجدول: ثابت}
.td {التجاوز: مخفي؛}
</نمط>
<فئة الجدول = عرض السل = 80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</TD>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</الجدول>

يجب تحديد عرض الخلية هنا كنسبة مئوية: يتم عرضه بشكل طبيعي، ولكن لا يمكن التفافه.

ملاحظة: لا توجد طريقة جيدة لالتفاف محتوى الحاوية ضمن FF. يمكنك فقط استخدام التجاوز لإخفاء المحتوى الإضافي لتجنب التأثير على التأثير الكلي.