Word-Break dan Overflow-Wrap (dahulunya Word-Wrap) berbeza apabila berurusan dengan kata-kata panjang atau kandungan yang tidak dapat dipecahkan. 1. Word-break mengawal bagaimana kata-kata dalam unsur-unsur blok memecahkan garis, memaksa semua kata-kata panjang untuk memecahkan, terus-semua mengelakkan pecah, sesuai untuk teks Cina, Jepun dan Korea. 2. Melimpah-Pembalut memecahkan kata-kata panjang apabila perlu untuk mengelakkan limpahan, kata-kata adalah lebih bijak untuk menilai konteksnya. 3. Dalam senario penggunaan, gunakan perkataan-break: break-all for code, dan gunakan limpahan-wrap: break-word untuk komen pengguna. 4. Perhatikan perbezaan keserasian penyemak imbas dan tingkah laku mudah alih yang berbeza. Adalah disyorkan untuk menggabungkan ruang putih atau tanda hubung untuk meningkatkan kebolehbacaan.

Apabila berurusan dengan susun atur teks di CSS, terutamanya untuk kata-kata yang panjang atau kandungan yang tidak dapat dipecahkan, word-break dan word-wrap (kini dikenali secara rasmi sebagai overflow-wrap ) adalah dua sifat yang membantu mengawal bagaimana teks pecah dalam bekas. Mereka mungkin kelihatan sama pada pandangan pertama, tetapi mereka bekerja sedikit berbeza dan digunakan dalam senario yang berbeza.

Apa word-break

Properti word-break mengawal bagaimana kata-kata memecah di dalam elemen blok apabila mereka mencapai tepi bekas.

• normal - menggunakan tingkah laku lalai (pecah di ruang yang dibenarkan).
• break-all -Membolehkan memecahkan kata-kata jika diperlukan untuk mengelakkan limpahan-berguna untuk rentetan seperti URL atau coretan kod.
• keep-all -menghalang pecah dalam kata-kata, sering digunakan untuk teks Cina, Jepun, atau Korea di mana sempadan perkataan tidak jelas.

Sebagai contoh, jika anda mempunyai rentetan panjang seperti verylongwordwithoutspaces , menetapkan word-break: break-all akan memaksanya untuk membungkus ke pelbagai baris walaupun di tengah-tengah perkataan.

Ini amat berguna apabila memaparkan kandungan yang dihasilkan oleh pengguna yang mungkin mengandungi rentetan yang sangat panjang-tanpa itu, rentetan itu boleh memecahkan susun atur anda.

Bagaimana word-wrap (atau overflow-wrap ) Berfungsi

Walaupun namanya, word-wrap tidak benar-benar mengenai pembungkus kata-kata secara umum-ia lebih banyak mengenai pengendalian limpahan yang disebabkan oleh kata-kata yang tidak dapat dipecahkan.

Ia mempunyai dua nilai utama:

• normal - hanya pecah pada titik pecah perkataan biasa.
• break-word -membolehkan pecah dalam perkataan untuk mengelakkan limpahan (sama dengan word-break: break-all , tetapi sedikit lebih terperinci).

Anda akan sering melihat ini digunakan pada unsur -unsur seperti komen atau gelembung sembang, di mana pengguna mungkin menaip atau menampal sesuatu seperti kunci API atau alamat e -mel yang panjang yang akan menyebabkan masalah susun atur.

Nota: word-wrap kini secara rasmi dipanggil overflow-wrap , walaupun kedua-dua nama masih berfungsi.

Bilakah hendak menggunakan yang mana?

Memilih di antara mereka bergantung pada jenis kandungan yang anda hadapi dan betapa ketat keperluan susun atur anda.

• Gunakan word-break: break-all jika anda ingin secara agresif memecahkan perkataan panjang tanpa mengira bahasa atau konteks.
• Gunakan overflow-wrap: break-word Jika anda ingin sedikit lebih berhati-hati-ia cuba untuk menyimpan kata-kata utuh kecuali benar-benar diperlukan.

Juga pertimbangkan untuk menggabungkan mereka dengan white-space atau menggunakan hyphens untuk membaca yang lebih baik dalam beberapa kes.

Inilah rujukan cepat:

• Untuk blok kod atau log → word-break: break-all
• Untuk komen pengguna atau sembang → overflow-wrap: break-word
• Untuk Hyphenation yang lebih baik (di mana disokong) → Tambahkan hyphens: auto

Beberapa perkara untuk diperhatikan

Ciri -ciri ini tidak selalu berkelakuan sama di semua pelayar, terutama yang lebih tua.

• Dalam beberapa versi Edge atau Safari, word-break mungkin tidak berfungsi sama seperti Chrome.
• Hyphenation ( hyphens ) berfungsi dengan baik dalam pelayar moden tetapi tidak terpakai kepada semua bahasa secara lalai.
• Penyemak imbas mudah alih kadang -kadang mengendalikan pembungkus perkataan secara berbeza kerana saiz skrin dan tingkah laku zum.

Jika anda membina tapak atau aplikasi yang responsif, uji gaya pemecahan teks anda pada peranti yang berbeza dan saiz viewport untuk memastikan tiada apa-apa yang melimpah tanpa diduga.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Terangkan sifat `kata-break` dan` word-wrap`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!