Masalah pembungkusan baris otomatis, pembungkusan baris karakter normal lebih masuk akal, tetapi angka kontinu dan karakter bahasa Inggris sering kali memperluas penampung, yang cukup merepotkan. Berikut ini adalah cara CSS mengimplementasikan pembungkus baris.
Definisi CSS terbaik dari pembungkus baris
code.wrap { tata letak tabel: diperbaiki; kata-break: break-all; overflow:hidden;
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 pembungkus teks normal (teks Asia dan non-Asia) memiliki spasi default:normal, jika ditentukan</div>
css
#wrap{white-space:normal; width:200px; }
1. (IE browser) Untuk karakter bahasa Inggris berkelanjutan dan angka Arab, gunakan word-wrap: break-word; atau word-break:break-all; melanggar
#wrap{word-break:break-all; lebar:200px;}
atau
#wrap{word-wrap:break-word; width:200px;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Efek: Jeda baris dapat dicapai
2. (browser Firefox) Pemutusan karakter bahasa Inggris berkelanjutan dan angka Arab , semua versi Firefox tidak menyelesaikan masalah ini. Kami hanya dapat menyembunyikan karakter di luar batas atau menambahkan bilah gulir ke penampung.
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
Efek: Wadahnya normal dan kontennya disembunyikan
untuk tabel
http://www.knowsky.com/
1. (Browser IE) Gunakan table-layout:fixed; untuk memaksakan lebar tabel dan menyembunyikan konten berlebih
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
Efek: Menyembunyikan konten yang berlebihan
2. (browser IE) gunakan table-layout: fixed; untuk memaksa lebar tabel, bagian dalam td, th menggunakan word-break: break-all; -kata ;Pemisahan baris
<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>
</table>
Efek: Pembungkusan baris dimungkinkan
3. (browser IE) Div bersarang, p, dll. di td, th menggunakan metode pembungkusan baris div dan p yang disebutkan di atas
4. (browser Firefox) Gunakan tata letak tabel: diperbaiki ;Memaksa lebar tabel, bagian dalam td, th menggunakan word-break: break-all; atau word-wrap: break-word; untuk membungkus baris, gunakan overflow:hidden; ; tidak berfungsi di sini
<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>
</table>
Efek: Menyembunyikan lebih dari konten
5. (Browser Firefox) Div sarang, p, dll. di td, th. Gunakan metode yang disebutkan di atas untuk menangani Firefox untuk menjalankan kotak kode terjadi memang sangat kecil, namun prank yang dilakukan oleh netizen 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 ">
<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 Oleh karena itu, atribut WIDTH lebih diutamakan daripada properti noWrap dalam skenario ini</div>
<h1><code>IE word-wrap : break-word ;</code></h1>
<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>
<h1><code>Firefox/ word-break:break-all overflow:auto;</code></ h1>
<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="tata letak-tabel: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="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>
</tubuh>
</html>