<wbr>
Un endroit où le navigateur peut couper un mot long ou une chaîne de caractères, quand la ligne manque de place.
- Affichage
- inline
- Balise fermante
- Aucune, élément vide
- Contenu autorisé
- Aucun, l’élément est vide
Exemple
#<div class="stage" style="max-width: 200px;">
<p>Sans wbr : <code>calculateTotalPriceWithDiscount()</code></p>
<p>Avec wbr : <code>calculate<wbr>Total<wbr>Price<wbr>With<wbr>Discount()</code></p>
</div>Le premier nom n’a nulle part où se couper, donc il dépasse du cadre. Le second se coupe aux endroits marqués par <wbr>.
Définition et utilisation
#L’élément <wbr> (de l’anglais word break opportunity) indique un endroit où le navigateur peut couper la ligne si la place manque. Quand il y a assez de place, rien ne se passe. Il n’ajoute pas non plus de trait d’union ni aucun autre caractère.
Il est utile pour les longues chaînes sans espace : des noms de fonctions en camelCase, des chemins de fichiers, des adresses URL ou des identifiants qui, sur un écran étroit, dépasseraient du conteneur.
Des solutions apparentées fonctionnent un peu différemment. L’entité ­ (trait d’union conditionnel) coupe un mot et ajoute un trait d’union à l’endroit de la coupure. En CSS, overflow-wrap: anywhere coupe automatiquement les longues chaînes n’importe où, et hyphens: auto découpe les mots selon les règles de la langue. <wbr>, lui, donne un contrôle total sur l’endroit où la coupure se produit.
Syntaxe
#tres<wbr>Longue<wbr>VariableAttributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si un trait d’union doit apparaître à l’endroit de la coupure, utilisez
­plutôt que<wbr>. - Pour un contenu sur lequel vous n’avez pas de contrôle, par exemple des commentaires d’utilisateurs, le CSS
overflow-wrap: anywhereconvient mieux. - Dans les adresses URL, insérez
<wbr>après les barres obliques, pour que la coupure tombe à des endroits naturels.
Entrées associées
#- <br>Un retour à la ligne à l’endroit où il est inséré, sans commencer un nouveau paragraphe.
- <code>Un fragment de code informatique : le nom d’une variable, d’une fonction, d’une balise ou d’un fichier, ainsi qu’un court extrait.
- <pre>Un texte préformaté : il conserve les espaces, les tabulations et les retours à la ligne exactement comme dans le code.
- <span>Un conteneur en ligne générique sans signification, pour styliser un fragment de texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.