De eigenschap word-break

De eigenschap word-break maakt het mogelijk om de letters van een lang woord af te breken en naar een nieuwe regel te laten gaan, als dat woord niet in de breedte van de container past.

Syntaxis

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

Waarden

Waarde	Beschrijving
`break-all`	Dwingt lange woorden om afgebroken te worden naar een nieuwe regel, als het woord niet in de container past.
`keep-all`	Voor het afbreken van karakters.
`normal`	Standaard gedrag: als een lang woord niet in de breedte van de container past - zal het gewoon buiten zijn grenzen uitsteken (terwijl het op een nieuwe regel begint).

Standaardwaarde: normal.

Voorbeeld . Waarde normal

In dit voorbeeld past een heel lang woord niet in de container en zal het buiten zijn grenzen uitsteken (terwijl het op een nieuwe regel begint):

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

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

Voorbeeld . Waarde break-all

En nu worden de letters die niet pasten, gewoon afgebroken naar de volgende regel:

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

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

Zie ook

de eigenschap overflow-wrap,
die het ook mogelijk maakt om letters van een lang woord naar een nieuwe regel af te breken
de eigenschap hyphens,
die woordafbrekingen per lettergreep inschakelt
de eigenschap overflow,
die de delen die buiten de grenzen van het blok uitsteken afsnijdt
de tag wbr,
die zachte afbreekpunten implementeert met behulp van HTML
de tag br,
waarmee je tekst geforceerd naar een nieuwe regel kunt laten afbreken