Egenskaben overflow-wrap

Egenskaben overflow-wrap tillader at flytte bogstaverne i et langt ord til en ny linje, hvis ordet ikke kan være inde i containerens bredde.

Syntaks

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

Værdi	Beskrivelse
`break-word`	Tvinger lange ord til at blive brudt over på en ny linje, hvis ordet ikke passer i containeren. Ordet vil starte på en ny linje.
`normal`	Standard opførsel: hvis et langt ord ikke kan være inde i containerens bredde - vil det simpelthen flyde over dens grænse (det vil starte på en ny linje).

Standardværdi: normal.

I dette eksempel vil et meget langt ord ikke kunne være i containeren og vil flyde over dens grænser (det vil starte på en ny linje):

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

Men nu vil de bogstaver, som ikke kunne være, blive flyttet til den næste linje (det lange ord vil stadig starte på en ny linje):

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

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

egenskaben word-break,
som også tillader at flytte bogstaver i et langt ord til en ny linje
egenskaben word-wrap,
som er det forældede navn for egenskaben overflow-wrap
egenskaben hyphens,
som aktiverer orddeling ved stavelsesgrænser
tagget wbr,
som implementerer bløde linjeskift ved hjælp af HTML
tagget br,
som kan bruges til at tvinge tekst til at gå på en ny linje