Egenskapen word-break

Egenskapen word-break låter dig bryta bokstäverna i ett långt ord på en ny rad, om detta ord inte får plats i behållarens bredd.

Syntax

selektor {
	word-break: break-all | keep-all | normal;
}

Värde	Beskrivning
`break-all`	Tvingar långa ord att brytas på en ny rad, om ordet inte får plats i behållaren.
`keep-all`	För att bryta ideogram.
`normal`	Standardbeteende: om ett långt ord inte får plats i behållarens bredd - kommer det att sticka ut utanför dess gräns (medan det börjar på en ny rad).

Standardvärde: normal.

I detta exempel kommer ett väldigt långt ord inte att få plats i behållaren och kommer att sticka ut utanför dess gränser (och börjar på en ny rad):

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

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

Och nu kommer de bokstäver som inte fick plats att brytas på nästa rad:

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

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

egenskapen overflow-wrap,
som också låter dig bryta bokstäverna i ett långt ord på en ny rad
egenskapen hyphens,
som aktiverar ordbrytning med avstavning
egenskapen overflow,
som klipper av delar som sticker ut utanför blockets gräns
taggen wbr,
som implementerar mjuka brytningar med HTML-medel
taggen br,
som kan användas för att tvinga texten att brytas på en ny rad