De eigenschap overflow-wrap

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

Syntaxis

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

Waarden

Waarde	Beschrijving
`break-word`	Zorgt ervoor dat lange woorden afgebroken worden naar een nieuwe regel, als het woord niet in de container past. Het woord begint dan op een nieuwe regel.
`normal`	Standaardgedrag: als een lang woord niet in de breedte van de container past - zal het eenvoudigweg buiten zijn grenzen uitsteken (het begint dan wel op een nieuwe regel).

Standaardwaarde: normal.

Voorbeeld . Waarde normal

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

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

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

Результат:

Voorbeeld . Waarde break-word

En nu worden de letters die niet pasten, eenvoudigweg naar de volgende regel afgebroken (het lange woord zal nog steeds op een nieuwe regel beginnen):

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

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

Результат:

Zie ook

de eigenschap word-break,
die ook het mogelijk maakt om letters van een lang woord naar een nieuwe regel af te breken
de eigenschap word-wrap,
die een verouderde naam is voor de eigenschap overflow-wrap
de eigenschap hyphens,
die woordafbrekingen per lettergreep inschakelt
de tag wbr,
die zachte afbrekingen implementeert met behulp van HTML
de tag br,
waarmee je tekst geforceerd naar een nieuwe regel kunt laten afbreken