La balise HTML <wbr>
La balise HTML <wbr> marque une opportunité de coupure de mot. Apprenez sa syntaxe, des exemples et ses différences avec ­.
La balise HTML <wbr> (Word BReak opportunity, opportunité de coupure de mot) marque un emplacement dans le texte où le navigateur peut insérer un saut de ligne si la ligne risque de déborder. Elle ne force pas de coupure — elle ajoute seulement l'option de couper à cet endroit. Si le mot tient sur la ligne, <wbr> n'affiche rien du tout.
Cela diffère de la balise <br>, qui force toujours un saut de ligne. Avec <wbr>, le navigateur coupe à cet endroit uniquement lorsqu'il doit faire passer une longue chaîne non sécable, comme une URL, un chemin de fichier ou un très long mot.
La balise <wbr> fait partie des éléments HTML5.
Pourquoi utiliser <wbr> ?
Par défaut, les navigateurs coupent les lignes aux espaces et aux traits d'union. Une longue chaîne sans espaces — une URL, un chemin de fichier, un hachage ou un mot composé très long — n'a pas de point de coupure naturel, ce qui pousse le navigateur à faire l'une de ces deux choses indésirables :
- il pousse la chaîne au-delà du bord de son conteneur, provoquant un débordement horizontal, ou
- il coupe la chaîne à un endroit maladroit et difficile à lire.
Placer <wbr> à des endroits judicieux indique au navigateur « voici un endroit sûr pour couper cette chaîne si vous manquez de place. » Les coupures n'apparaissent que lorsque c'est nécessaire, donc sur un écran large la chaîne reste intacte.
Mettre une longue URL à la ligne — l'utilisation la plus courante
Une longue URL sans espaces est le cas classique pour <wbr>. Ajoutez un <wbr> après les barres obliques ou les points pour que le lien puisse se replier proprement dans une colonne étroite sans déborder :
<p style="width: 220px; border: 1px solid #ccc; padding: 8px;">
Read it here:
https://<wbr>www.w3docs.com<wbr>/learn-html<wbr>/html-wbr-tag
</p>Sur un écran large, l'URL reste sur une seule ligne, mais dans le conteneur de 220px ci-dessus, elle se coupe uniquement aux points <wbr> que vous avez autorisés.
<wbr> pour un long mot
<wbr> aide aussi avec un seul mot extrêmement long. Comparez un paragraphe avec et sans opportunités de coupure :
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis</p>Le premier paragraphe peut déborder de son conteneur ; le second peut se replier proprement entre les syllabes lorsque l'espace vient à manquer.
<wbr> vs. ­ vs. CSS
<wbr> est l'un des plusieurs moyens de contrôler la façon dont le texte est mis à la ligne. Chacun se comporte différemment, choisissez donc le bon outil :
| Technique | Ce qu'elle fait | Affiche un trait d'union ? |
|---|---|---|
<wbr> | Marque une opportunité de coupure dans le balisage. Coupe uniquement si nécessaire. | Non |
­ (trait d'union conditionnel) | Marque une opportunité de coupure. Coupe uniquement si nécessaire. | Oui — un trait d'union apparaît à la coupure |
CSS overflow-wrap: break-word | Permet au navigateur de couper un long mot n'importe où pour éviter le débordement. | Non |
CSS word-break: break-all | Force les coupures entre n'importe quels deux caractères. | Non |
Quand choisir lequel :
- Utilisez
<wbr>lorsque vous connaissez les bons points de coupure (après chaque/dans une URL, entre les syllabes) et que vous voulez aucun trait d'union affiché. - Utilisez
­lorsque vous voulez le même contrôle mais avec un trait d'union à la coupure — idéal pour la césure de vrais mots. - Utilisez CSS
overflow-wrap/word-breaklorsque vous ne pouvez pas (ou ne voulez pas) modifier chaque chaîne manuellement et que vous avez juste besoin d'arrêter le débordement à l'échelle du site. Ce sont généralement les meilleurs choix pour le contenu généré par les utilisateurs lorsque vous ne contrôlez pas le texte.
Un trait d'union au point de coupure de ligne n'est pas introduit par l'élément <wbr>. Si vous souhaitez qu'un trait d'union apparaisse uniquement à la fin d'une ligne repliée, utilisez ­ (l'entité de caractère trait d'union conditionnel) à la place.
Exemple avec un chemin de fichier
Ici, <wbr> permet à un chemin de fichier Windows de se couper après chaque segment de barre oblique inverse :
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Sans opportunités de coupure, tout le chemin passe à la ligne suivante. L'ajout d'éléments <wbr> lui permet de se replier proprement :
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Syntaxe
La balise <wbr> est un élément vide, donc elle n'a pas de balise fermante. En XHTML, vous devez l'auto-fermer comme <wbr/>.
Exemple complet de la balise HTML <wbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Résultat
Attributs
L'élément <wbr> n'a pas d'attributs spécifiques. Il ne supporte que les attributs globaux et les attributs d'événement.