Bagaimanakah Saya Boleh Menghalang Perkataan Panjang daripada Memecah Susun atur DIV Saya?

Menghalang Kata-kata Panjang daripada Memecah Div Anda

Dalam peralihan daripada reka letak berasaskan jadual kepada reka letak berasaskan DIV, masalah biasa berterusan: limpahan perkataan panjang yang tidak sedap dipandang di tepi lajur DIV. Isu ini melanda malah tapak web utama dan terutamanya berleluasa dalam bahasa seperti Jerman, di mana perkataan harian pun boleh panjang.

Penyelesaian:

Sempang Lembut

Menggunakan tanda sempang lembut (&malu;) membolehkan anda menetapkan tempat penyemak imbas harus putus panjang perkataan:

averyvery­longword

Watak ini membenarkan pelayar untuk menjadikan perkataan sama ada sebagai "averyverylongword" atau "averyvery-

longword."

Ungkapan biasa boleh membantu secara strategik memasukkan tanda sempang lembut:

/([^\s-]{5})([^\s-]{5})/ → ­

Elemen

Sebagai alternatif, suntikan HTML5 elemen, bekas IE-isme:

averyvery<wbr>longword

Ini memecahkan perkataan tanpa sempang, menghasilkan "veryvery

longword."

CSS Hyphens

Disokong oleh versi terkini IE, Firefox dan Safari (bukan Chrome), CSS sempang mendayakan sempang automatik:

div.breaking {
  hyphens: auto;
}

Perhatikan bahawa ciri ini bergantung pada kamus sempang dan mungkin tidak selalu memecahkan perkataan panjang secara konsisten.

Limpahan dan Ruang Putih: pra-balut

Penyelesaian berdaya maju lain termasuk mengawal limpahan dan menetapkan ruang putih kepada pra-bungkus:

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

Kedua-dua pendekatan menghalang perkataan panjang daripada melepasi sempadan DIV.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Perkataan Panjang daripada Memecah Susun atur DIV Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!