Masalah pembungkusan baris otomatis, pembungkusan baris karakter normal lebih masuk akal, tetapi angka kontinu dan karakter bahasa Inggris sering kali memperluas penampung, yang cukup memusingkan. Berikut ini adalah cara mengimplementasikan pembungkus baris di CSS.
Untuk elemen tingkat blok seperti div dan p, elemen pembungkus teks normal (teks Asia dan teks non-Asia) memiliki spasi putih:normal default, dan elemen tersebut akan dibungkus secara otomatis setelah lebar yang ditentukan.
html
<div id="wrap">Elemen pembungkusan teks normal (teks Asia dan non-Asia) memiliki spasi default:normal, jika ditentukan</div>
css
#wrap{spasi putih:normal; lebar:200 piksel }
1. (Browser IE) Untuk karakter bahasa Inggris dan angka Arab yang berkelanjutan, gunakan word-wrap: break-word; atau word-break:break-all;
#wrap{pemecah kata:pemecah-semua; lebar:200px;}
atau
#wrap{wrap-kata:break-word; lebar:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Efek: Jeda garis dapat dicapai
2. (Browser Firefox) Pemutusan baris karakter bahasa Inggris dan angka Arab yang berkelanjutan. Semua versi Firefox tidak menyelesaikan masalah ini. Kami hanya dapat menyembunyikan karakter yang melebihi batas atau menambahkan bilah gulir ke wadah.
#wrap{pemecah kata:pemecah-semua; lebar:200px;
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Efek: Wadahnya normal dan isinya disembunyikan untuk tabel
(1) (Browser IE) Gunakan table-layout: fixed; untuk memaksakan lebar tabel dan menyembunyikan konten berlebih
<tabel style="tabel-tata letak: tetap" lebar="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</tabel>
Efek: Sembunyikan konten yang berlebihan
(2) (browser IE) gunakan table-layout: fixed; untuk memaksa lebar tabel, bagian dalam td, gunakan word-break: break-all; atau word-wrap: break-word;
<lebar tabel="200" style="tata letak-tabel:tetap;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</tabel>
Efek: Jeda baris dapat dibuat
3. (Browser IE) Saat menyarangkan div, p, dll. di td, th, gunakan metode pembungkusan baris div dan p yang disebutkan di atas.
4. (Browser Firefox) Gunakan table-layout: fixed; untuk memaksa lebar tabel, bagian dalam td, gunakan word-break: break-all; atau word-wrap: break-word; tersembunyi; untuk menyembunyikan Di luar konten, overflow:auto;
<tabel style="tabel-tata letak: tetap" lebar="200">
<tr>
<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>
</tabel>
Efek: Menyembunyikan lebih dari sekadar konten
5. (Browser Firefox) Nest div, p, dll. di td, th, dll. Gunakan metode yang disebutkan di atas untuk menangani Firefox