Vlastnosť overflow-wrap

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

Syntax

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

Hodnoty

Predvolená hodnota: normal.

Príklad . Hodnota normal

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

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

Результат:

Príklad . Hodnota break-word

A teraz sa písmená, ktoré sa nezmestili, jednoducho prelomia na ďalší riadok (pričom dlhé slovo sa aj tak bude začínať na novom riadku):

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

Результат:

Pozri tiež