Artikel ini mencantumkan gaya CSS yang direkomendasikan untuk jeda baris yang kompatibel dengan IE dan FF, dan merinci perbedaan antara word-wrap dan word-break.
Gaya jeda baris CSS yang direkomendasikan kompatibel dengan IE dan FF
Cara terbaik adalah
bungkus kata: kata pecah; luapan: tersembunyi;
alih-alih
bungkusan kata:penghancuran kata;penghancuran kata:penghancuran-semua;
Juga tidak
bungkus kata: kata pecah; overflow: otomatis;
Tidak ada masalah di IE, tetapi di FF, string bahasa Inggris yang panjang akan diblokir di luar konten.
Perbedaan antara word-wrap dan word-break
Berikut isi kutipannya:
bungkus kata:
normal Default. Konten melebihi batas wadahnya.
break-word Konten digabungkan ke baris berikutnya, dan word-break terjadi bila diperlukan. istirahat kata:
normal Default. Mengizinkan pemutusan baris dalam kata-kata. Tampaknya hanya berfungsi untuk teks Asia.
break-all Berperilaku sama seperti normal untuk teks Asia, namun memungkinkan garis terputus secara sewenang-wenang untuk teks non-Asia.
keep-all Tidak mengizinkan pemecahan kata untuk bahasa Mandarin, Jepang, dan Korea. Berfungsi dengan cara yang sama seperti biasanya untuk semua bahasa non-Asia. |
Ringkasannya adalah sebagai berikut:
pembungkus kata mengontrol pembungkusan baris.
Saat menggunakan break-word, jeda baris akan dipaksakan. Tidak ada masalah dengan bahasa Mandarin, dan tidak ada masalah dengan kalimat bahasa Inggris. Tapi untuk rangkaian bahasa Inggris yang panjang, itu tidak berhasil.
break-word mengontrol apakah akan mematahkan kata-kata.
Normal adalah situasi default, dan kata-kata bahasa Inggris tidak terpecah.
break-all adalah kata istirahat. Ketika sebuah kata mencapai batas, huruf berikutnya secara otomatis berpindah ke baris berikutnya. Terutama memecahkan masalah string bahasa Inggris yang panjang.
keep-all mengacu pada kata-kata berkelanjutan dalam bahasa Cina, Jepang, dan Korea. Artinya, jika Anda hanya menggunakan waktu ini tanpa membungkus kata, bahasa Mandarin tidak akan membungkusnya. (Kalimat bahasa Inggris normal.)
yaitu di bawah:
Menggunakan word-wrap:break-word; semuanya berfungsi dengan baik.
ff selanjutnya:
Jika Anda tidak menggunakan keduanya, tidak akan ada masalah dengan bahasa Mandarin. Tidak akan ada masalah dengan kalimat bahasa Inggris juga. Namun, string yang panjang dalam bahasa Inggris dapat menimbulkan masalah.
Untuk menyelesaikan rangkaian bahasa Inggris yang panjang, word-wrap:break-word;word-break:break-all; Namun, cara ini akan menyebabkan kata-kata dalam kalimat bahasa Inggris biasa menjadi terputus (hal yang sama juga berlaku untuk ie).
Masalah utama saat ini ada pada rangkaian panjang kata-kata bahasa Inggris dan bahasa Inggris yang terputus. Faktanya, string panjang dalam bahasa Inggris hanyalah sebuah kata yang relatif panjang.
Artinya, haruskah kata-kata bahasa Inggris diputus? Masalahnya sudah jelas dan jelas tidak boleh diputuskan.
Untuk string panjang dalam bahasa Inggris, itu berbahaya, jadi tentu saja tidak perlu khawatir. Namun, kita juga harus memikirkan beberapa cara untuk mencegahnya memperluas wadahnya.
Gunakan: overflow:auto; di bawah yaitu, string panjang akan dibungkus secara otomatis. ff, string yang panjang akan tertutup.
Jadi, singkatnya, cara terbaik adalah word-wrap:break-word;overflow:hidden; daripada word-wrap:break-word;word-break:break-all;.
word-wrap:break-word;overflow:auto; Tidak ada masalah di IE. Di bawah ff, string panjang akan dikaburkan sebagian.
Selain itu, kode pengujiannya adalah sebagai berikut:
Berikut isi kutipannya:
1.htm================== = ===== <gaya>
.c1{ lebar:300px; batas:1px merah pekat}
.c2{ width:300px;word-wrap:break-word; border:1px kuning solid}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; perbatasan:1px hijau solid}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; perbatasan:1px biru solid}
.c5{ lebar:300px;penghancuran kata:penghancuran-semua; batas:1px hitam pekat}
.c6{ width:300px;word-break:keep-all; border:1px merah solid}
.c7{ lebar:300px;wrap-wrap:break-word;overflow:auto; kuning pekat}
</gaya> .c1{ lebar:300px; batas:1px merah pekat}
<div kelas="c1">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c1>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c1>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c1>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> <br>
.c2{ width:300px;word-wrap:break-word; border:1px kuning solid}
<div kelas="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c2>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c2>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c2>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> <br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; perbatasan:1px hijau solid}
<div kelas="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c3>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c3>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c3>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> <br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; perbatasan:1px biru solid}
<div kelas="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c4>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c4>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c4>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> <br>
.c5{ lebar:300px;penghancuran kata:penghancuran-semua; batas:1px hitam pekat}
<div kelas="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c5>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c5>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c5>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> <br>
.c6{ width:300px;word-break:keep-all; border:1px merah solid}
<div kelas="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c6>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c6>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c6>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> <br>
.c7{ lebar:300px;wrap-wrap:break-word;overflow:auto; border:1px kuning solid}
<div kelas="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<kelas div=c7>
Ini semua bahasa Inggris. Ini semua bahasa Inggris.
</div>
<kelas div=c7>
Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina. Semuanya dalam bahasa Cina.
</div>
<kelas div=c7>
Pengaturan campuran Cina dan Inggris. Bahasa Cina dan Inggris. Cina dan Inggris.
</div> |
