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. CSS terbaik untuk menentukan jeda baris .wrap { tata letak tabel: diperbaiki; kata-break: break-all; overflow:hidden } 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;} <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. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Efek: Wadahnya normal dan isinya tersembunyi untuk meja <tabel style="tata letak-tabel:tetap" lebar="200"> Efek: Sembunyikan konten yang berlebihan 2. (Browser IE) Gunakan table-layout: fixed; untuk memaksa lebar tabel, dan bagian dalam td, th menggunakan word-break: break-all; atau word-wrap: break-word; <lebar tabel="200" style="tata letak-tabel:tetap;"> 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, th menggunakan baris word-break: break-all; atau word-wrap: break-word; tersembunyi; untuk menyembunyikan Di luar konten, overflow:auto; Efek: Menyembunyikan lebih dari sekadar konten 5. (Browser Firefox) Nest div, p, dll di td, th, dll. Gunakan cara yang disebutkan di atas untuk menangani Firefox untuk menjalankan kotak kode. Terakhir, kemungkinan terjadinya fenomena ini sangat kecil, namun netizens. lelucon tidak bisa dikesampingkan. Berikut ini adalah efek dari contoh yang disebutkan <!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 : break-word ;</code></h1> <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
Di sini overflow: tersembunyi; atau otomatis;
==================== ===============
Untuk elemen tingkat blok seperti div dan p, pembungkus baris elemen teks normal (teks Asia dan teks non-Asia) memiliki spasi putih default: normal, dan secara otomatis akan dibungkus 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 }
atau
#wrap{wrap-kata:break-word; lebar:200px;}
#wrap{pemecah kata:pemecah-semua; lebar:200px;
1. (Browser IE) Gunakan table-layout:fixed; untuk memaksakan lebar tabel dan menyembunyikan konten berlebih
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</tabel>
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</tabel>
<tabel style="tata letak-tabel: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>
<html xmlns="http://www.w3.org/1999/xhtml">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=gb2312" />
<title>Pembungkusan garis karakter</title>
<gaya tipe="teks/css">
tabel,td,th,div { batas:1px solid hijau;}
kode { font-family:"Kurir Baru", Kurir, monospace;}
</gaya>
</kepala>
<tubuh>
<h1><kode>div</code></h1>
<h1><code>Semua spasi putih:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap masih muncul di elemen td yang atribut WIDTH-nya disetel ke nilai yang lebih kecil daripada konten sel yang tidak dibungkus, bahkan jika properti noWrap disetel ke benar. Oleh karena itu, atribut WIDTH lebih diutamakan daripada properti noWrap dalam skenario ini</div>
<div style="word-wrap : break-word ; lebar:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE kata-break:break-all;</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><kode>tabel</code></h1>
<h1><code>tata letak tabel: diperbaiki;</code></h1>
<tabel style="tabel-tata letak: tetap" lebar="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss</td>
</tr>
</tabel>
<h1><code>tata letak tabel: diperbaiki; kata-break : break-all; word-wrap : break-word ;</code></h1>
<lebar tabel="200" style="tata letak-tabel:tetap;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</tabel>
<h1><code>FF tata letak tabel: diperbaiki; overflow: tersembunyi;</code></h1>
<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>
</tubuh>
</html>