Egenskapen overflow-wrap

Egenskapen overflow-wrap tillater å flytte bokstavene i et langt ord til en ny linje, hvis ordet ikke får plass i containerens bredde.

Syntaks

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

Verdi	Beskrivelse
`break-word`	Tvinger lange ord til å brytes over på en ny linje, hvis ordet ikke får plass i containeren. Ordet vil starte på en ny linje.
`normal`	Standard oppførsel: hvis et langt ord ikke får plass i containeren i bredden - vil det simpelthen flyte utover dens grense (men vil starte på en ny linje).

Standardverdi: normal.

I dette eksemplet vil et veldig langt ord ikke få plass i containeren og vil flyte utover dens grenser (men 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;
}

Nå vil de bokstavene som ikke fikk plass, blir flyttet til neste linje (men det lange ordet vil fortsatt 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;
}

egenskapen word-break,
som også tillater å bryte bokstavene i et langt ord over på en ny linje
egenskapen word-wrap,
som er et foreldet navn for egenskapen overflow-wrap
egenskapen hyphens,
som aktiverer orddeling med bindestrek
taggen wbr,
som implementerer myke linjebrytninger ved hjelp av HTML
taggen br,
som kan brukes til å tvinge tekst over på en ny linje