Properti word-break menentukan apakah dan bagaimana memecah garis di tengah kata.
Biasanya, garis-garis yang tidak muat di dalam wadah mereka pecah di titik-titik tertentu, khususnya di mana ada ruang putih atau tanda hubung. Tetapi ketika properti word-break diatur ke break-all, browser akan memecah baris di titik mana pun, bahkan di tengah-tengah kata yang muncul di akhir baris dan itu akan terlalu panjang untuk masuk ke dalam wadah.
Hasil dari memecah garis di tengah kata-kata akan mendekati apa yang kita dapatkan ketika kita membenarkan teks di dalam suatu elemen (lihat penyelarasan teks), kecuali bahwa ruang putih tidak terpengaruh, sehingga mungkin ada garis di mana ruang putih akan ada antara kata terakhir di garis dan tepi wadah.
Trivia & Catatan
Kata-kata patah pada akhir setiap baris oleh properti kata-break menjadi praktis tidak terbaca karena tidak ada indikasi visual di mana kata tersebut telah rusak.
Alternatif yang lebih mudah dibaca dan responsif adalah menggunakan properti bungkus kata bersama dengan properti tanda hubung untuk memecahkan kata-kata yang panjang dan membuat browser menambahkan tanda hubung pada titik-titik di mana kata-kata telah rusak. Anda dapat melangkah lebih jauh dan menyelaraskan teks menggunakan pelurusan teks: justify untuk mendapatkan efek garis lebar penuh dengan kata-kata yang melanggar tanpa mengorbankan keterbacaan. Anda dapat membaca lebih banyak dan melihat lebih banyak contoh di halaman entri bungkus kata dan tanda hubung.
Official Syntax
word-break: normal | break-all | keep-all
Values
normal: Line break sesuai aturan yang biasa
break-all: Selain aturan melanggar normal, garis dapat memecah antara dua huruf (kecuali di mana dilarang oleh properti line-break). Tanda hubung tidak diterapkan.
Opsi ini digunakan sebagian besar dalam konteks di mana teks didominasi menggunakan karakter CJK dengan beberapa kutipan non-CJK dan diharapkan teks didistribusikan secara lebih baik pada setiap baris.
keep-all: Istirahat kata normal ditekan di semua karakter termasuk bahasa CJK. Untuk teks non-CJK, itu sama dengan nilai normal.
