الصفحة الرئيسية>دروس تصميم الويب>توحيد الويب

ينفذ CSS التفاف الخط التلقائي

الكاتب：Eve Cole وقت التحديث：2009-05-31 00:37:31

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

لشعبة

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

#wrap{مسافة بيضاء: عرض عادي: 200 بكسل }

أو

#wrap{كلمة فاصل:كسر الكل؛العرض:200px؛}

<div>ddd111111111111111111111111111111111</div>

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

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

#wrap{مسافة بيضاء: عرض عادي: 200 بكسل؛}

أو

#wrap{word-break:break-all;width:200px;

<div>ddd11111111111111111111111111111111111111</div>

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

للجدول

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

وفيما يلي المحتوى المقتبس:

<نمط>
.tb{تخطيط الجدول: ثابت}
</نمط>

<عرض الجدول = "80">
<تر>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
</tr>
</الجدول>

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

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

وفيما يلي المحتوى المقتبس:

<نمط>
.tb {تخطيط الجدول: ثابت}
</نمط>

<عرض الجدول = "80">
<تر>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
</tr>
</الجدول>

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

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

وفيما يلي المحتوى المقتبس:

<نمط>
.tb{تخطيط الجدول: ثابت}
</نمط>

<عرض الجدول=80>
<تر>
<عرض td=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</TD>
</tr>
</الجدول>

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

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

وفيما يلي المحتوى المقتبس:

<نمط>
.tb {تخطيط الجدول: ثابت}
.td {التجاوز: مخفي؛}
</نمط>

<عرض الجدول=80>
<تر>
<عرض td=25% الآن>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</TD>
<td الآنراب>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</TD>
</tr>
</الجدول>

يجب تحديد عرض الخلية هنا كنسبة مئوية

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

مقالات ذات صلة