Properti overflow-wrap

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

Sintaks

selector {
	overflow-wrap: break-word | normal;
}

Nilai	Deskripsi
`break-word`	Memaksa kata panjang untuk dipindahkan ke baris baru, jika kata tersebut tidak muat dalam kontainer. Dalam hal ini, kata akan dimulai dari baris baru.
`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 {
	word-wrap: normal;
	overflow-wrap: normal;
	border: 1px solid red;
	width: 200px;
}

Sekarang, huruf-huruf yang tidak muat akan dipindahkan ke baris berikutnya (namun kata panjang tersebut tetap akan dimulai dari baris baru):

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

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

properti word-break,
yang juga memungkinkan untuk memindahkan huruf kata panjang ke baris baru
properti word-wrap,
yang merupakan nama usang untuk properti overflow-wrap
properti hyphens,
yang mengaktifkan pemenggalan kata berdasarkan suku kata
tag wbr,
yang mengimplementasikan pemenggalan lembut menggunakan HTML
tag br,
yang dapat digunakan untuk memaksa teks dipindahkan ke baris baru