Vlastnosť word-break

Vlastnosť word-break umožňuje zlomiť písmená dlhého slova na nový riadok, ak sa toto slovo nezmestí do šírky kontajnera.

Syntax

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

Hodnota	Popis
`break-all`	Núti dlhé slová zlomiť sa na nový riadok, ak sa slovo nezmestí do kontajnera.
`keep-all`	Pre zlomenie hieroglyfov.
`normal`	Štandardné správanie: ak sa dlhé slovo nezmestí do šírky kontajnera - jednoducho presiahne jeho okraj (pričom začne na novom riadku).

Predvolená hodnota: normal.

V tomto príklade sa veľmi dlhé slovo nezmestí do kontajnera a prekročí jeho hranice (pričom začne na novom riadku):

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

Результат:

A teraz sa písmená, ktoré sa nezmestili, jednoducho prelomia na ďalší riadok:

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

Результат:

vlastnosť overflow-wrap,
ktorá tiež umožňuje zlomiť písmená dlhého slova na nový riadok
vlastnosť hyphens,
ktorá zapína zlomenie slov podľa slabík
vlastnosť overflow,
ktorá oreže časti presahujúce cez okraj bloku
prvok wbr,
ktorý implementuje mäkké zlomenia pomocou HTML
prvok br,
pomocou ktorého možno nútiť text prelomiť sa na nový riadok