Woorden afbreken met HTML en CSS

Hieronder zie je twee blokken met daarin de tekst "Dit heelheelerglangewoord wordt afgebroken.". In het bovenste blok worden door de woorden 'default' afgebroken. Dat gebeurt door de browser. In het onderste blok wordt er wat aan gestuurd met HTML en CSS.
Om een en ander duidlijk te maken worden beide blokken geanimeerd.

Dit heelheelerglangewoord wordt afgebroken.

Dit heelheelerglangewoord wordt afge­broken.

• HTML
• De HTML van het bovenste blok is:
  <p class="voorbeeld">Dit heelheelerglangewoord wordt afgebroken.</p>
   
  De HTML van het onderste blok is:
  <p class="voorbeeld">Dit heel<wbr>heel<wbr>erg<wbr>lange<wbr>woord wordt afge&shy;broken.</p>
   
• Zowel in het bovenste als in het onderste blok wordt de regel afgebroken als dat nodig is, op een spatie. Dat is de default-instelling, het normale gedrag van HTML.
• In onderste blok wordt de tag <wbr> gebruikt in "heelheelerglangewoord". Op deze plaats wordt het woord botweg afgebroken als dat nodig is. Er wordt geen afbreekstreepje ingevoegd.
• Als je wel afbreekstreepjes wilt gebruik je &shy;, zoals in "afgebroken".
   
• CSS
• De klasse voorbeeld bevat de regel word-wrap:break-word;. Die is nodig om de tekst binnen de blokken te houden. Als dit wordt weggelaten zal de tekst buiten de blokken komen (overflow). Het is ook daardoor dat <wbr> en &shy; goed werken.
• De overige CSS is alleen voor de opmaak en wordt elders op deze site beschreven.

Opmerkingen:
 
•   In het item Automatisch woorden en regels afbreken in HTML wordt de CSS-eigenschap word-wrap uitgebreid besproken.
•   De tag <wbr> is nieuw in HTML5 en werkt daarom niet met oudere, of niet goed bijgewerkte, browsers.
•   In HTML 4 bestond een tag <nobr>, waarmee het afbreken van een regel kan worden voorkomen. Deze tag is verdwenen uit de standaarden, maar in ouder websites kun je het nog tegenkomen. In HTML5 gebruik je daar CSS voor, zie bovenstaande link.