Properti word-break

Properti word-break memungkinkan untuk memindahkan huruf kata panjang ke baris baru, jika kata tersebut tidak muat dalam lebar kontainer.

Sintaks

selector {
	word-break: break-all | keep-all | normal;
}

Nilai	Keterangan
`break-all`	Memaksa kata panjang untuk dipindahkan ke baris baru, jika kata tersebut tidak muat dalam kontainer.
`keep-all`	Untuk memindahkan karakter CJK (seperti kanji, hiragana).
`normal`	Perilaku standar: jika kata panjang tidak muat dalam lebar kontainer - kata tersebut akan keluar dari batasnya (namun akan dimulai dari baris baru).

Nilai default: normal.

Dalam contoh ini, kata yang sangat panjang tidak akan muat dalam kontainer dan akan keluar dari batasnya (namun akan dimulai dari baris baru):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	word-break: normal;
	border: 1px solid red;
}

Sekarang, huruf-huruf yang tidak muat akan dipindahkan ke baris berikutnya:

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#elem {
	width: 200px;
	word-break: break-all;
	border: 1px solid red;
}

properti overflow-wrap,
yang juga memungkinkan untuk memindahkan huruf kata panjang ke baris baru
properti hyphens,
yang mengaktifkan pemenggalan kata berdasarkan suku kata
properti overflow,
yang memotong bagian-bagian yang keluar dari batas blok
tag wbr,
yang mengimplementasikan pemenggalan lembut menggunakan HTML
tag br,
yang dapat digunakan untuk memaksa teks dipindahkan ke baris baru