Omadus word-break

Omadus word-break võimaldab poolitada pika sõna tähed uuele reale, kui see sõna ei mahu konteineri laiusesse.

Süntaks

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

Väärtused

Vaikeväärtus: normal.

Näide . Väärtus normal

Selles näites väga pikk sõna ei mahu konteinerisse ja ulatub selle piiridest välja (samal ajal kui see algab uuelt realt):

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;
}

Результат:

Näide . Väärtus break-all

Nüüd need tähed, mis ei mahtunud, lihtsalt poolitakse järgmisele reale:

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;
}

Результат:

Vaata ka