Sifat overflow-wrap

Sifat overflow-wrap membolehkan huruf perkataan panjang dibawa ke baris baru, jika perkataan itu tidak muat dalam lebar bekas.

Sintaks

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

Nilai

Nilai	Keterangan
`break-word`	Memaksa perkataan panjang dibawa ke baris baru jika perkataan itu tidak muat dalam bekas. Pada masa yang sama, perkataan akan bermula dari baris baru.
`normal`	Tingkah laku piawai: jika perkataan panjang tidak muat dalam lebar bekas - ia akan melepasi sempadannya (pada masa yang sama ia akan bermula dari baris baru).

Nilai lalai: normal.

Contoh . Nilai normal

Dalam contoh ini, perkataan yang sangat panjang tidak akan muat dalam bekas dan akan melepasi sempadannya (pada masa yang sama ia akan bermula 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;
}

Contoh . Nilai break-word

Dan sekarang huruf-huruf yang tidak muat, hanya akan dibawa ke baris seterusnya (pada masa yang sama perkataan panjang itu tetap akan bermula 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;
}

Lihat juga

sifat word-break,
yang juga membolehkan huruf perkataan panjang dibawa ke baris baru
sifat word-wrap,
yang merupakan nama lapuk bagi sifat overflow-wrap
sifat hyphens,
yang menghidupkan pemotongan perkataan mengikut suku kata
tag wbr,
yang melaksanakan pemotongan lembut menggunakan HTML
tag br,
yang boleh digunakan untuk memaksa teks dibawa ke baris baru