Właściwość overflow-wrap

Właściwość overflow-wrap pozwala przenieść litery długiego słowa do nowego wiersza, jeśli to słowo nie mieści się w szerokości kontenera.

Składnia

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

Wartości

Wartość	Opis
`break-word`	Wymusza przenoszenie długich słów do nowego wiersza, jeśli słowo nie mieści się w kontenerze. Jednocześnie słowo rozpocznie się od nowego wiersza.
`normal`	Standardowe zachowanie: jeśli długie słowo nie mieści się w szerokości kontenera - po prostu wyjdzie poza jego granicę (jednocześnie rozpocznie się od nowego wiersza).

Wartość domyślna: normal.

Przykład . Wartość normal

W tym przykładzie bardzo długie słowo nie zmieści się w kontenerze i wyjdzie poza jego granice (jednocześnie rozpocznie się od nowego wiersza):

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

Przykład . Wartość break-word

A teraz te litery, które się nie mieściły, po prostu przeniosą się do następnego wiersza (jednocześnie długie słowo nadal będzie zaczynać się od nowego wiersza):

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

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

Zobacz też

właściwość word-break,
która również pozwala przenieść litery długiego słowa do nowego wiersza
właściwość word-wrap,
która jest przestarzałą nazwą właściwości overflow-wrap
właściwość hyphens,
która włącza przenoszenie słów według sylab
znacznik wbr,
który realizuje miękkie przenoszenia za pomocą środków HTML
znacznik br,
za pomocą którego można wymusić przeniesienie tekstu do nowego wiersza