Properti word-break

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

Sintaks

cssselector {
  word-break: break-all | keep-all | normal;
}

Nilai	Keterangan
`break-all`	Memaksa kata panjang untuk dipindahkan ke baris baru, jika kata tersebut tidak muat dalam kontainer.
`keep-all`	Untuk memindahkan karakter CJK (seperti kanji, hiragana).
`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):

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

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

Результат:

Sekarang, huruf-huruf yang tidak muat akan dipindahkan ke baris berikutnya:

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

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

Результат:

properti overflow-wrap,
yang juga memungkinkan untuk memindahkan huruf kata panjang ke baris baru
properti hyphens,
yang mengaktifkan pemenggalan kata berdasarkan suku kata
properti overflow,
yang memotong bagian-bagian yang keluar dari batas blok
tag wbr,
yang mengimplementasikan pemenggalan lembut menggunakan HTML
tag br,
yang dapat digunakan untuk memaksa teks dipindahkan ke baris baru