Vlastnost overflow-wrap

Vlastnost overflow-wrap umožňuje přenést písmena dlouhého slova na nový řádek, pokud se toto slovo nevejde do šířky kontejneru.

Syntaxe

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

Hodnota	Popis
`break-word`	Přinutí dlouhá slova zalomit se na nový řádek, pokud se slovo nevejde do kontejneru. Slovo přitom začne na novém řádku.
`normal`	Standardní chování: pokud se dlouhé slovo nevejde do šířky kontejneru - jednoduše přesáhne jeho hranici (přičemž začne na novém řádku).

Výchozí hodnota: normal.

V tomto příkladu se velmi dlouhé slovo nevejde do kontejneru a přesáhne jeho hranice (přičemž začne na novém řádku):

<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 nyní se ta písmena, která se nevešla, jednoduše přenesou na následující řádek (přičemž dlouhé slovo bude stále začínat na novém řádku):

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

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

vlastnost word-break,
která také umožňuje přenést písmena dlouhého slova na nový řádek
vlastnost word-wrap,
která je zastaralým názvem vlastnosti overflow-wrap
vlastnost hyphens,
která zapíná dělení slov podle slabik
značka wbr,
která implementuje měkká zalomení pomocí HTML
značka br,
pomocí které lze vynutit přenos textu na nový řádek