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

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

Hodnota	Popis
`break-word`	Núti dlhé slová sa prelomiť na nový riadok, ak sa slovo nezmestí do kontajnera. Slovo sa pri tom začne na novom riadku.
`normal`	Štandardné správanie: ak sa dlhé slovo nezmestí do šírky kontajnera - jednoducho presahuje jeho okraj (pričom sa 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 sa začne na novom riadku):

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

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

#elem {
	overflow-wrap: break-word;
	border: 1px solid red;
	width: 200px;
}

vlastnosť word-break,
ktorá tiež umožňuje preniesť písmená dlhého slova na nový riadok
vlastnosť word-wrap,
ktorá je zastaraným názvom pre vlastnosť overflow-wrap
vlastnosť hyphens,
ktorá zapína delenie slov na slabiky
prvok wbr,
ktorý implementuje mäkké prelomenia pomocou HTML
prvok br,
pomocou ktorého možno vynútiť prelomenie textu na nový riadok