Lastnost overflow-wrap

Lastnost overflow-wrap omogoča prelom črk dolge besede v novo vrstico, če ta beseda ne gre v širino vsebnika.

Sintaksa

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

Vrednost	Opis
`break-word`	Prisili dolge besede, da se prelomijo v novo vrstico, če se ta beseda ne prilega v vsebnik. Pri tem se bo beseda začela v novi vrstici.
`normal`	Standardno obnašanje: če dolga beseda ne gre po širini v vsebnik - preprosto sega čez njegovo mejo (pri tem se začne v novi vrstici).

Privzeta vrednost: normal.

V tem primeru se zelo dolga beseda ne bo prilegala v vsebnik in bo segala čez njegove meje (pri tem se bo začela v novi vrstici):

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

Результат:

Zdaj pa se bodo črke, ki niso šle, preprosto prelomile v naslednjo vrstico (pri tem se bo dolga beseda še vedno začela v novi vrstici):

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

Результат:

lastnost word-break,
ki prav tako omogoča prelom črk dolge besede v novo vrstico
lastnost word-wrap,
ki je zastarelo ime za lastnost overflow-wrap
lastnost hyphens,
ki vklopi prelome besed po zlogih
oznaka wbr,
ki implementira mehke prelome s pomočjo HTML-ja
oznaka br,
s katero lahko prisilimo prelom besedila v novo vrstico