wbr – coupure possible

un<wbr>très<wbr>long<wbr>mot

Un endroit où le navigateur peut couper la ligne si le mot ne tient pas – mais seulement dans ce cas. Utile pour les longues URL, les noms de fichiers ou les mots composés dans des colonnes étroites. Contrairement à &shy; (trait d’union conditionnel), aucun trait d’union n’apparaît à l’endroit de la coupure.

  • Affichage par défaut : display: inline
  • Balise de fermeture : aucune – élément vide (void element) sans contenu ni balise de fermeture
  • Contenu : rien
  • Où il peut figurer : partout où le contenu phrasé est autorisé
  • Interface DOM : HTMLElement

Attributs

Uniquement les attributs globaux.

Exemples

Une longue URL dans une colonne étroite – elle se coupe après les barres obliques :

<p class="narrow">www.example.com/<wbr>recettes/<wbr>pain-de-seigle-au-levain-recette/</p>
.narrow {
  width: 180px;
  padding: 6px;
  border: 1px solid #ccc;
}
Résultat

www.example.com/recettes/pain-de-seigle-au-levain-recette/

Points d’attention

  • Si le mot tient, wbr ne fait rien – contrairement à br, qui coupe toujours.
  • Pour couper les longs mots en général, le CSS suffit : overflow-wrap: anywhere ou hyphens: auto.

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 1, Firefox 1, Safari 4. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
br – saut de ligne
pre – texte préformaté
span – élément en ligne générique