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

selektor {
	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):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#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):

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur adipiscing elit.
</div>

#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