Proprietatea overflow-wrap

Proprietatea overflow-wrap permite transferarea literelor unui cuvânt lung pe o linie nouă, dacă acest cuvânt nu încape în lățimea containerului.

Sintaxă

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

Valori

Valoare	Descriere
`break-word`	Forțează cuvintele lungi să fie transferate pe o linie nouă, dacă acest cuvânt nu încape în container. În acest caz, cuvântul va începe pe o linie nouă.
`normal`	Comportamentul standard: dacă un cuvânt lung nu încape în lățimea containerului - acesta va ieși pur și simplu dincolo de granița sa (în acest caz va începe pe o linie nouă).

Valoarea implicită: normal.

Exemplu . Valoarea normal

În acest exemplu, un cuvânt foarte lung nu va încăpea în container și va ieși dincolo de granițele acestuia (în acest caz va începe pe o linie nouă):

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

Exemplu . Valoarea break-word

Iar acum acele litere care nu încăpeau, vor fi pur și simplu transferate pe linia următoare (în acest caz cuvântul lung va începe oricum pe o linie nouă):

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

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

Vedeți și

proprietatea word-break,
care permite, de asemenea, transferarea literelor unui cuvânt lung pe o linie nouă
proprietatea word-wrap,
care este denumirea învechită a proprietății overflow-wrap
proprietatea hyphens,
care activează transferul cuvintelor pe silabe
tag-ul wbr,
care implementează transferuri soft prin mijloace HTML
tag-ul br,
cu ajutorul căruia puteți forța în mod obligatoriu transferul textului pe o linie nouă