Tips mewujudkan pembungkusan baris otomatis dengan CSS

Semua orang tahu bahwa bahasa Inggris atau angka yang terus menerus dapat membuat container membesar dan tidak dapat otomatis membungkusnya sesuai dengan ukuran containernya.

untuk div

1. (browser IE) white-space:normal; word-break:break-all; yang pertama di sini mengikuti standar.

#wrap{spasi putih:normal; lebar:200 piksel }
atau
#wrap{pemecah kata:pemecah-semua;lebar:200px;}
<div id="wrap">dd11111111111111111111111111111</div>

Efek: Jeda garis dapat dicapai

2. (browser Firefox) white-space:normal; word-break:break-all;overflow:hidden; Tidak ada metode implementasi yang baik di bawah FF yang sama .Efeknya lebih baik!

#wrap{spasi putih:normal; lebar:200px;
atau
#wrap{word-break:break-all;width:200px;
<div id="wrap">dd11111111111111111111111111111111111111</div>

Efek: Wadahnya normal dan isinya tersembunyi

untuk meja

1. (Browser IE) Gunakan gaya table-layout:fixed;

<gaya>
.tb{tata letak tabel: diperbaiki}
</gaya>
<tabel kelas="tbl" lebar="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</tabel>

Efek: Dapat membungkus baris 2. (Browser IE) menggunakan style

<gaya>
.tb {tata letak tabel: diperbaiki}
</gaya>
<tabel class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</tabel>

Efek: Jeda baris dapat dibuat

3. (Browser IE) Gunakan gaya tata letak tabel: tetap dan nowrap saat menggunakan persentase untuk memperbaiki ukuran td.

<gaya>
.tb{tata letak tabel: diperbaiki}
</gaya>
<tabel kelas="tb" lebar=80>
<tr>
<td lebar=25% sekarang>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</tabel>

Efek: Kedua TD membungkus secara normal

4. (Browser Firefox) Gunakan gaya tata letak tabel: fixed dan nowrap saat menggunakan persentase untuk memperbaiki ukuran td, dan gunakan div

<gaya>
.tb {tata letak tabel: diperbaiki}
.td {meluap: tersembunyi;}
</gaya>
<kelas tabel=tb lebar=80>
<tr><td lebar=25% kelas=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</tabel>

Lebar sel di sini harus ditentukan sebagai persentase: ditampilkan secara normal, tetapi tidak dapat dibungkus.

Catatan: Tidak ada cara yang baik untuk membungkus konten kontainer di bawah FF. Anda hanya dapat menggunakan overflow untuk menyembunyikan konten tambahan agar tidak memengaruhi efek keseluruhan.