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

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

Nilai

Nilai default: normal.

Contoh . Nilai normal

Dalam contoh ini, kata yang sangat panjang tidak akan muat dalam kontainer dan akan keluar dari batasnya (namun akan dimulai 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

Sekarang, huruf-huruf yang tidak muat akan dipindahkan ke baris berikutnya (namun kata panjang tersebut tetap akan dimulai 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