The overflow-wrapharta di CSS membolehkan anda untuk menentukan bahawa pelayar boleh memecahkan baris teks dalam unsur yang disasarkan ke banyak baris di tempat yang sebaliknya tidak mudah pecah. Ini membantu mengelakkan rentetan teks yang luar biasa panjang menyebabkan masalah susun atur kerana limpahan.
.example ( overflow-wrap: break-word; )Nilai
normal: lalai. Penyemak imbas akan memecahkan garis mengikut peraturan pemecahan garis biasa. Kata-kata atau rentetan yang tidak putus tidak akan putus, walaupun mereka melimpah ke bekas.break-word: kata-kata atau rentetan watak yang terlalu besar untuk dimasukkan ke dalam bekasnya akan pecah di tempat yang sewenang-wenangnya untuk memaksa pemutusan garis. Watak tanda hubung tidak akan dimasukkan, walaupunhyphensharta itu digunakan.inherit: elemen yang disasarkan mesti mewarisi nilaioverflow-wrapharta yang ditentukan pada ibu bapa terdekatnya.
Demo di bawah ini mempunyai butang togol yang membolehkan anda beralih antara normaldan break-word.
Lihat demo Pen overflow-wrap / word-wrap oleh Louis Lazaris (@impressivewebs) di CodePen.
Untuk menunjukkan masalah yang overflow-wrapcuba diselesaikan, demo menggunakan kata panjang yang luar biasa di dalam bekas yang agak kecil. Apabila anda menghidupkan break-word, kata itu dipecah untuk menampung sedikit ruang yang ada, seolah-olah kata itu mempunyai banyak kata.
Rentetan watak ruang yang tidak pecah ( ) akan diperlakukan dengan cara yang sama dan juga akan pecah di tempat yang sesuai.
overflow-wrapberguna apabila diterapkan pada elemen yang mengandungi kandungan buatan pengguna yang tidak dimoderasi (seperti bahagian komen). Ini dapat mengelakkan URL panjang dan rentetan teks yang tidak terputus (contohnya vandalisme) daripada melanggar susun atur halaman web.
Persamaan dengan word-breakHarta
overflow-wrapdan word-breakberkelakuan sama dan boleh digunakan untuk menyelesaikan masalah yang serupa. Ringkasan asas perbezaan, seperti yang dijelaskan dalam spesifikasi CSS adalah:
overflow-wrapumumnya digunakan untuk mengelakkan masalah dengan tali panjang menyebabkan susun atur yang rosak kerana teks mengalir di luar bekas.word-breakmenentukan peluang pembungkus lembut antara huruf yang biasanya dikaitkan dengan bahasa seperti Cina, Jepun, dan Korea (CJK).
Setelah menerangkan contoh bagaimana word-breakdapat digunakan dalam konten CJK, spesifikasi mengatakan: "Untuk mengaktifkan peluang rehat tambahan hanya jika terjadi limpahan, lihat overflow-wrap".
Dari ini, kita dapat menduga yang word-breakpaling baik digunakan dengan kandungan bukan bahasa Inggeris yang memerlukan peraturan pemecahan kata tertentu, dan yang mungkin diselingi dengan kandungan bahasa Inggeris, sementara overflow-wrapharus digunakan untuk mengelakkan susun atur yang rusak kerana rentetan panjang, tanpa mengira bahasa yang digunakan .
word-wrapHarta Bersejarah
overflow-wrapadalah nama standard untuk pendahulunya, word-wrapharta tanah. word-wrappada asalnya adalah ciri eksplisit Internet-eksklusif sahaja yang akhirnya disokong di semua penyemak imbas walaupun tidak menjadi standard.
word-wrapmenerima nilai yang sama dengan overflow-wrapdan berkelakuan sama. Menurut spesifikasi, penyemak imbas "harus menganggap word-wrapsebagai nama alternatif untuk overflow-wrapharta itu, seolah-olah itu adalah singkatan dari overflow-wrap". Juga, semua ejen pengguna diminta untuk menyokong word-wrapselama-lamanya, atas alasan warisan.
Keduanya overflow-wrapdan word-wrapakan lulus pengesahan CSS selagi validator ditetapkan untuk menguji terhadap CSS3 atau lebih tinggi (saat ini lalai).
Berkaitan
- kata putus
- tanda hubung
- ruang putih
- Mengendalikan Perkataan dan URL Panjang
Maklumat lanjut
- Word-Wrap: Harta CSS3 yang Berfungsi di Setiap Penyemak Imbas
- Pembalut Limpahan pada W3C
- Perbincangan mengenai Stack Overflow on
word-breakvs.overflow-wrap
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Sokongan "separa" yang ditunjukkan di atas disebabkan penyemak imbas yang lebih tua menyokong word-wraptetapi tidak overflow-wrap. Menggunakan kedua-duanya dapat memastikan keserasian ke belakang.
Versi draf editor spesifikasi W3C merangkumi nilai baru yang disebut break-spacesyang berkaitan dengan urutan watak ruang kosong yang "dipelihara". Tidak ada sokongan penyemak imbas yang diketahui untuk ciri ini, dan tidak termasuk dalam versi draf versi spesifikasi yang berfungsi.