Sur mobile, un mot très long, comme une adresse e-mail, un nom de fichier ou une longue chaîne technique, peut déborder de sa colonne et casser la mise en page, alors qu'une phrase ordinaire se coupe sans problème entre les mots. Le navigateur ne sait normalement couper une ligne qu'aux espaces : sans espace, il n'a nulle part où s'arrêter, et laisse le mot déborder plutôt que de le couper n'importe où.
La balise <wbr>, pour "word break opportunity", résout ce cas précis : elle indique un endroit, à l'intérieur d'un mot, où le navigateur est autorisé à couper la ligne s'il en a besoin, sans jamais y être obligé et sans ajouter le moindre caractère visible.
Définition
<wbr> est un élément vide, sans contenu ni balise fermante, que l'on insère directement au milieu d'un mot ou d'une chaîne de caractères trop longue. Il ne représente rien de visible en lui-même : il fonctionne comme une simple suggestion adressée au navigateur, un endroit "coupez ici si vous manquez de place", laissé sans effet si la place ne manque pas.
C'est cette nature optionnelle qui distingue <wbr> de tout ce qui ressemble à un retour à la ligne imposé : ce dernier coupe toujours au même endroit, que la ligne soit large ou étroite, alors que <wbr> ne coupe que si c'est réellement nécessaire, en fonction de la largeur disponible au moment de l'affichage.
Différence avec un trait d'union ou un retour à la ligne forcé
Un trait d'union tapé au clavier ("-") est un vrai caractère : il s'affiche toujours, il fait partie du texte, et il est copié si votre visiteur sélectionne le mot pour le coller ailleurs. Il change donc littéralement l'orthographe de ce que vous écrivez, ce qui pose problème pour un nom de domaine, un identifiant technique ou un mot-dièse, où ajouter un tiret produirait une chaîne différente de l'originale.
<wbr> évite ce défaut : invisible à l'écran même lorsqu'il déclenche une coupure, il n'ajoute aucun caractère et disparaît totalement d'un texte copié-collé. Un retour à la ligne forcé, à l'inverse, coupe systématiquement au même endroit, y compris sur un grand écran où le mot tiendrait très bien en entier : il impose une décision qui ne dépend jamais de l'espace réellement disponible.
Exemple concret
Voici un identifiant de fichier très long, illustré dans un extrait de <code>, où deux points de coupure optionnels sont proposés au navigateur, sans jamais lui imposer de rupture.
<p>rapport<wbr />financier<wbr />trimestriel2026.pdf</p>Sur un écran large, le nom de fichier s'affiche entier, sur une seule ligne, comme si <wbr> n'existait pas. Sur un écran étroit, le navigateur choisit l'un des deux points proposés pour couper la ligne, exactement au moment où la place vient à manquer.
Cas d'usage et bonnes pratiques
On rencontre surtout <wbr> pour afficher de longues URL, des noms de fichiers, des références produit ou des mots composés très longs à l'intérieur d'une colonne étroite : une barre latérale, une bulle de conversation, un tableau compact. Placer la balise à des endroits qui ont un sens, comme juste après une barre oblique ou un point dans une URL, produit une coupure plus lisible qu'une coupure choisie au hasard par le navigateur.
La technique se combine bien avec des propriétés CSS comme overflow-wrap, qui autorisent le navigateur à couper n'importe où en dernier recours : <wbr> lui propose alors des emplacements précis et propres, plutôt que de le laisser choisir un point de coupure arbitraire, parfois en plein milieu d'une syllabe.
N'attendez pas de voir un tiret apparaître à l'endroit de la coupure : <wbr> n'affiche jamais aucun caractère, même quand le navigateur choisit réellement de couper la ligne à cet endroit. Pour vérifier son effet, il faut rétrécir la fenêtre ou tester sur un écran de téléphone : sur un écran large, tout paraît identique avec ou sans la balise, ce qui donne parfois l'impression, à tort, qu'elle ne fonctionne pas.
Questions fréquentes
wbr ajoute-t-elle un trait d'union à l'endroit où la ligne se coupe ?Non, jamais. Contrairement à un trait d'union tapé au clavier, <wbr> n'ajoute strictement aucun caractère visible, ni avant ni après la coupure. Le mot est simplement réparti sur deux lignes, sans signe de ponctuation pour indiquer la coupure, ce qui le distingue nettement d'un tiret ordinaire.
Rien du tout : le navigateur ignore purement et simplement la balise et affiche le mot intact, sur une seule ligne, exactement comme si <wbr> n'était pas présente dans le code. C'est justement cette absence d'effet, tant que la place suffit, qui distingue la balise d'un retour à la ligne imposé, lequel coupe toujours au même endroit.
overflow-wrap ?Partiellement. Une propriété CSS comme overflow-wrap: anywhere autorise bien le navigateur à couper un mot trop long, mais elle choisit le point de coupure au hasard, parfois en plein milieu d'une syllabe ou d'un identifiant technique. <wbr> permet au contraire de choisir précisément les endroits pertinents, comme après une barre oblique dans une URL, et les deux techniques se combinent très bien ensemble.