Property word-wrap memungkinkan kata-kata panjang dipecah dan dibungkus ke baris berikutnya. Dibutuhkan dua nilai: normal dan break-word.

Dalam contoh di bawah ini, properti word-wrap diatur ke normal.

/* css */
p {
  width: 210px;
  height: 100px;
  border: 1px solid #000000;
  word-wrap: normal;
}

word-wrap.png

Sekarang mari kita lihat apa yang terjadi ketika kita menggunakan contoh yang sama dengan mengatur properti word-wrap menjadi break-word:

/* css */
p {
  width: 210px;
  height: 100px;
  border: 1px solid #000000;
  word-wrap: break-word;
}

break-word.png

Ketika properti word-wrap diatur ke break-word, browser memecah kata ketika terlalu panjang untuk muat ke dalam wadahnya.