The overflow-wrapproperti di CSS memungkinkan Anda untuk menentukan bahwa browser dapat mematahkan baris teks dalam elemen ditargetkan ke beberapa baris di tempat lain bisa dipecahkan. Ini membantu menghindari string teks yang sangat panjang yang menyebabkan masalah tata letak karena luapan.
.example ( overflow-wrap: break-word; )Nilai
normal: default. Browser akan memutus baris sesuai dengan aturan pemutusan baris normal. Kata-kata atau string yang tidak terputus tidak akan putus, meskipun meluap dari wadah.break-word: kata atau rangkaian karakter yang terlalu besar untuk muat di dalam penampungnya akan putus di tempat yang sewenang-wenang untuk memaksa pemutusan baris. Karakter tanda hubung tidak akan dimasukkan, bahkan jikahyphensproperti digunakan.inherit: elemen yang ditargetkan harus mewarisi nilaioverflow-wrapproperti yang ditentukan pada induk langsungnya.
Demo di bawah ini memiliki tombol sakelar yang memungkinkan Anda beralih antara normaldan break-word.
Lihat demo Pen overflow-wrap / word-wrap oleh Louis Lazaris (@impressivewebs) di CodePen.
Untuk mendemonstrasikan masalah yang overflow-wrapcoba dipecahkan, demo menggunakan kata yang sangat panjang di dalam wadah yang relatif kecil. Saat Anda mengaktifkan break-word, kata tersebut dipecah untuk mengakomodasi sedikit ruang yang tersedia, seolah-olah kata tersebut terdiri dari beberapa kata.
String karakter spasi tidak putus ( ) akan diperlakukan dengan cara yang sama dan juga akan putus di tempat yang sesuai.
overflow-wrapberguna saat diterapkan ke elemen yang berisi konten buatan pengguna yang tidak dimoderasi (seperti bagian komentar). Hal ini dapat mencegah URL panjang dan string teks tak terputus lainnya (misalnya vandalisme) merusak tata letak halaman web.
Kesamaan dengan word-breakProperti
overflow-wrapdan word-breakberperilaku sangat mirip dan dapat digunakan untuk memecahkan masalah serupa. Ringkasan dasar perbedaannya, seperti yang dijelaskan dalam spesifikasi CSS adalah:
overflow-wrapumumnya digunakan untuk menghindari masalah dengan string panjang yang menyebabkan tata letak rusak karena teks mengalir di luar wadah.word-breakmenentukan peluang soft wrap antara huruf yang umumnya terkait dengan bahasa seperti China, Jepang, dan Korea (CJK).
Setelah menjelaskan contoh bagaimana word-breakdapat digunakan dalam konten CJK, spesifikasi mengatakan: "Untuk mengaktifkan peluang jeda tambahan hanya dalam kasus overflow, lihat overflow-wrap".
Dari sini, kami dapat menduga bahwa word-breakpaling baik digunakan dengan konten non-Inggris yang memerlukan aturan pemecahan kata tertentu, dan itu mungkin diselingi dengan konten bahasa Inggris, sementara itu overflow-wrapharus digunakan untuk menghindari tata letak yang rusak karena string yang panjang, terlepas dari bahasa yang digunakan .
word-wrapProperti Historis
overflow-wrapadalah nama standar untuk pendahulunya, word-wrapproperti. word-wrappada awalnya adalah fitur khusus Internet Explorer yang pada akhirnya didukung di semua browser meskipun bukan standar.
word-wrapmenerima nilai yang sama overflow-wrapdan berperilaku dengan cara yang sama. Menurut spesifikasi, browser “harus memperlakukan word-wrapsebagai nama alternatif untuk overflow-wrapproperti, seolah-olah itu adalah singkatan dari overflow-wrap“. Selain itu, semua agen pengguna harus mendukung word-wraptanpa batas waktu, karena alasan lama.
Keduanya overflow-wrapdan word-wrapakan lulus validasi CSS selama validator disetel untuk menguji CSS3 atau lebih tinggi (saat ini menjadi default).
Terkait
- kata-istirahat
- tanda hubung
- ruang putih
- Menangani Kata-kata Panjang dan URL
Informasi Lebih Lanjut
- Word-Wrap: Properti CSS3 Yang Berfungsi di Setiap Browser
- Overflow Wrapping di W3C
- Diskusi tentang Stack Overflow pada
word-breakvs.overflow-wrap
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
Dukungan "parsial" yang ditunjukkan di atas disebabkan oleh browser lama yang mendukung, word-wraptetapi tidak overflow-wrap. Menggunakan keduanya dapat memastikan kompatibilitas ke belakang.
Versi draf editor dari spesifikasi W3C menyertakan nilai baru yang disebut break-spacesyang berhubungan dengan urutan karakter spasi kosong yang "dipertahankan". Tidak ada dukungan browser yang diketahui untuk fitur ini, dan itu tidak termasuk dalam versi draft kerja dari spesifikasi.