Svojstvo overflow-wrap

Svojstvo overflow-wrap omogućava prenos slova dugačke reči u novi red, ako ta reč ne stane u širinu kontejnera.

Sintaksa

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

Vrednost	Opis
`break-word`	Primorava dugačke reči da se prelome u novi red, ako se ta reč ne uklapa u kontejner. Pri tome će reč početi u novom redu.
`normal`	Standardno ponašanje: ako dugačka reč ne stane po širini u kontejner - ona će jednostavno izaći van njegovih granica (pri čemu će početi u novom redu).

Podrazumevana vrednost: normal.

U ovom primeru veoma dugačka reč neće moći da stane u kontejner i izaćiće van njegovih granica (pri čemu će početi u novom redu):

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

Результат:

A sada će se slova koja nisu stajala, jednostavno preneti u sledeći red (pri čemu će dugačka reč svejedno počinjati u novom redu):

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

Результат:

svojstvo word-break,
koje takođe omogućava prenos slova dugačke reči u novi red
svojstvo word-wrap,
koje je zastareli naziv za svojstvo overflow-wrap
svojstvo hyphens,
koje uključuje prelamanje reči po slogovima
tag wbr,
koji realizuje meke prelome pomoću HTML-a
tag br,
pomoću kojeg se može prinudno naterati tekst da pređe u novi red