L'élément <wbr>

Introduite par HTML5, la balise <wbr> correspond à une opportunité de coupure de mot : word break.

Elle fonctionne en osmose avec la propriété CSS white-space qui peut elle même prendre les valeurs :

• nowrap (pas de retour à la ligne)
• normal (par défaut).

C'est-à-dire que l'on va indiquer où le texte peut être coupé à l'intérieur d'un mot, voire entre les mots, s'il y en a le besoin pour produire un retour à la ligne.

<p>Le mot rhino<wbr>pharyngito<wbr>laryngo<wbr>graphologiquement est beaucoup trop long.</p>

Il s'agit d'une balise auto-fermante (élément vide) donc il n'y a pas de balise de fin (comme <br> d'ailleurs). En réalité, <wbr> correspond au caractère U+200B, une espace de largeur nulle. Il n'y a pas de trait d'union automatiquement inséré à la coupure des lignes.

Démonstration en situation réelle

Avec des blocs de largeur limitée, on peut facilement tester les différents cas de figure :

Démonstration en ligne

Avec white-space: normal

Sans wbr

Avec la valeur par défaut de white-space le texte s'écoule normalement : il n'est pas empêché de passer à la ligne.

Avec wbr entre certaines syllabes

Cette fois-ci il peut y avoir des coupures entre les mots, qui s'écoulent dans l'espace restant.

Avec white-space: nowrap

Sans wbr

Le texte suit ce que lui ordonne la propriété CSS : pas de retour à la ligne en cas d'espace.

Avec wbr entre les mots

On retrouve là le comportement que l'on avait déjà avec les valeurs par défaut : CSS devrait interdire le retour à la ligne, mais wbr le permet.

Dans la pratique

On va rarement insérer des balises <wbr> manuellement dans de longues portions de texte. Il s'agit surtout de pouvoir cibler des cas très spécifiques, ou d'en tenir compte sur des éléments importants d'un design (en-tête, titre, pied de page...).