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