Selesaikan soal angka dan huruf yang membuat wadahnya lebih besar

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, 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

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;}

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;

Efek: Wadahnya normal dan isinya disembunyikan untuk tabel
(1)(Browser IE) menggunakan tata letak tabel: tetap; memaksakan lebar tabel dan menyembunyikan konten berlebih


abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss



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;


abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890



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;

abcdefghigklmnopqrstuvwxyz1234567890
abcdefghigklmnopqrstuvwxyz1234567890


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