Sifat overflow-wrap

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

Sintaks

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

Nilai

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):

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

css#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):

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

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

Результат:

Lihat juga