Az overflow-wrap tulajdonság

A overflow-wrap tulajdonság lehetővé teszi egy hosszú szó betűinek új sorra vitelét, ha az a szó nem fér el a tároló szélességében.

Szintaxis

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

Érték	Leírás
`break-word`	Arra kényszeríti a hosszú szavakat, hogy új sorra törődjenek, ha a szó nem fér el a tárolóban. Ekkor a szó új sorban kezdődik.
`normal`	Alapértelmezett viselkedés: ha egy hosszú szó nem fér el a tároló szélességében - az egyszerűen kilóg annak határain (de új sorban kezdődik).

Alapértelmezett érték: normal.

Ebben a példában egy nagyon hosszú szó nem fog elférenni a tárolóban és kilóg annak határain (de új sorban kezdődik):

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

Most viszont azok a betűk, amelyek nem fértek el, egyszerűen átkerülnek a következő sorra (de a hosszú szó továbbra is új sorban kezdődik):

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

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

a word-break tulajdonság,
amely szintén lehetővé teszi egy hosszú szó betűinek új sorra vitelét
a word-wrap tulajdonság,
amely az overflow-wrap tulajdonság elavult neve
a hyphens tulajdonság,
amely bekapcsolja a szótagolásos szótörést
a wbr tag,
amely lágy kötőjeleket valósít meg HTML eszközökkel
a br tag,
amelynek segítségével kényszeríthető a szöveg új sorba törése