Empêchez vos titres de se couper au mauvais endroit

Un titre qui passe à la ligne après un mot court, un mot isolé abandonné sur la dernière ligne et une longue URL qui élargit son conteneur sont trois défauts distincts, et chacun appelle généralement une correction CSS ou HTML différente.

Ils partagent aussi un trait agaçant : ils n’existent qu’à certaines largeurs de conteneur. Le designer fait une capture d’écran du titre cassé sur un téléphone de 384 px, vous ouvrez la page à la largeur de votre écran de bureau et tout paraît normal. Les mauvaises coupures ont tendance à se loger dans des plages étroites de viewport que personne n’a testées, ce qui explique pourquoi visionner des rejeux de session aux largeurs réellement utilisées par vos utilisateurs est souvent le moyen le plus rapide de constater le défaut tel qu’il s’est produit.

Cet article passe en revue chaque problème visible, l’outil qui le corrige et le raisonnement qui vous aidera à choisir le bon la prochaine fois.

Comment interdire une coupure à un endroit précis ?

Pour empêcher le navigateur de couper une ligne à un endroit précis, remplacez le caractère sécable par son jumeau insécable. Une espace insécable ( , U+00A0) maintient deux mots sur la même ligne en remplaçant l’espace ordinaire qui les sépare par une espace que le navigateur n’a pas le droit de couper. C’est la solution pour un titre qui passe à la ligne juste après « de » ou qui laisse un nom de produit scindé sur deux lignes.

Le texte peut aussi se couper là où il n’y a pas d’espace, le plus souvent après un trait d’union. Le gluon de mots (U+2060, écrit sous la forme de la référence nommée ⁠, sensible à la casse) interdit une coupure sans ajouter la moindre largeur, et le trait d’union insécable (U+2011, ‑, qui ne possède pas d’entité nommée) affiche un trait d’union qui ne peut pas devenir un point de coupure :

<h2>Shipping the new editor to&nbsp;everyone</h2>
<p>Take the exit for I&#8209;95 north.</p>

Comment autoriser une coupure à un endroit précis ?

Le problème inverse est celui d’une longue chaîne que vous souhaitez couper, mais uniquement aux endroits que vous choisissez. Insérer un élément <wbr> offre au navigateur un emplacement supplémentaire pour terminer une ligne, et rien de visible n’est inséré si la coupure est utilisée. Le trait d’union conditionnel ­ (U+00AD) signale le même type d’opportunité, mais affiche un trait d’union lorsque la coupure est utilisée ; jusque-là, il reste invisible. Il fonctionne avec la valeur par défaut hyphens: manual, il n’échoue donc que si quelque chose a défini hyphens: none.

<p>https://docs.example.com<wbr>/reference<wbr>/text-wrapping</p>
<p>The rise of hyper&shy;modularization</p>

Utilisez <wbr> pour les URL et identifiants affichés, ­ pour les vrais mots.

Longues chaînes insécables : overflow-wrap: anywhere

Pour le contenu généré par les utilisateurs, les longues URL et les jetons que vous ne pouvez pas annoter à la main, définissez overflow-wrap: anywhere et laissez le navigateur couper en dernier recours. Le détail crucial concerne le dimensionnement intrinsèque. Les deux valeurs permettent au navigateur de scinder un mot long, mais seule anywhere fait en sorte que ces points de coupure d’urgence soient pris en compte dans la largeur min-content de l’élément ; break-word laisse cette largeur égale à la longueur de la chaîne entière non coupée. C’est pourquoi un élément flex contenant une longue URL peut malgré tout refuser de rétrécir et faire exploser la mise en page avec break-word, alors qu’il rétrécit correctement avec anywhere. CSS Text Level 4 définit les deux valeurs de manière identique à cette unique différence près, et c’est précisément cette différence à laquelle on se heurte en pratique.

.card { display: flex; gap: 1rem; }
.card-body {
  /* break-word leaves min-content at the full URL width */
  overflow-wrap: anywhere;
}

La valeur anywhere fonctionne dans tous les moteurs modernes, Safari ayant été le dernier à la prendre en charge dans la version 15.4 (mars 2022). Les bases de code plus anciennes traînent parfois le word-break: break-word déprécié, qui finit par produire exactement le même retour à la ligne que overflow-wrap: anywhere tout en laissant word-break lui-même à son comportement normal. Remplacez-le.

Quelle est la place de word-break: break-all ?

word-break: break-all place la coupure là où la ligne manque de place, même au milieu d’un mot. Il n’ajoute aucun trait d’union et ne fera pas descendre un mot entier à la ligne suivante pour le préserver, si bien que la prose ordinaire se retrouve tronçonnée à chaque fin de ligne. C’est donc le mauvais outil pour la prose et le bon pour les chaînes où les frontières de mots n’ont aucun sens : hachages de commits, clés d’API, jetons dans les cellules de tableau. Sa valeur keep-all répond au besoin inverse pour les langues CJK, en supprimant les coupures entre les caractères.

.commit-hash {
  font-family: monospace;
  word-break: break-all; /* never on prose */
}

Colonnes étroites : hyphens: auto associé à un attribut lang

Lorsqu’une colonne étroite impose des coupures en plein mot, un point de césure conforme au dictionnaire se lit bien mieux qu’un tronçonnage brutal. hyphens: auto ne fait rien tant que l’élément ou l’un de ses ancêtres ne porte pas d’attribut lang. Chaque langue découpe les mots à sa manière : le navigateur doit donc savoir laquelle consulter avant de pouvoir appliquer la césure. La propriété est classée Baseline « largement disponible », fonctionnant sans préfixe dans tous les navigateurs depuis septembre 2023.

<aside lang="en" class="sidebar-note">Uncharacteristically long words wrap cleanly here.</aside>

.sidebar-note { hyphens: auto; }

Titres et paragraphes : text-wrap balance et pretty

Pour un mot esseulé sur la dernière ligne d’un titre, text-wrap: balance égalise la longueur des lignes en choisissant différemment parmi les points de coupure existants de la ligne ; il n’en crée aucun nouveau et ne redimensionne pas la boîte de l’élément, si bien qu’un titre équilibré conserve sa largeur d’origine. L’équilibrage étant coûteux, les navigateurs le plafonnent : Chromium s’arrête à six lignes, Firefox à dix, et les blocs plus longs se comportent normalement. text-wrap: pretty vise le corps de texte, en consacrant davantage d’efforts de mise en page pour éviter les orphelines ; il est pris en charge par Chromium et par Safari, qui l’a intégré dans la version 26, mais pas encore par Firefox. La propriété text-wrap elle-même fonctionne dans les navigateurs récents depuis mars 2024.

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

Table de correspondance problème/outil

Le principe qui sous-tend l’ensemble de cette boîte à outils : déterminez si le défaut requiert une coupure interdite, une coupure autorisée ou une stratégie globale de retour à la ligne, puis appliquez l’outil le plus ciblé qui le corrige. Une base de départ raisonnable consiste à appliquer overflow-wrap: anywhere aux conteneurs qui accueillent du contenu utilisateur, balance aux titres et pretty aux paragraphes ; gardez ensuite les entités au niveau du caractère pour les coupures individuelles qu’un designer vous signalera.

FAQ

Quelle est la différence entre overflow-wrap et word-break ?

overflow-wrap n'intervient que lorsqu'un mot est trop long pour tenir sur une ligne à lui seul, tout le reste passant à la ligne normalement. word-break: break-all modifie la stratégie pour l'élément entier et scindera un mot dès que la ligne manque de place. Utilisez overflow-wrap: anywhere pour les longues URL occasionnelles au sein d'une prose normale, et word-break: break-all uniquement pour les hachages et les jetons, où les frontières de mots n'ont aucun sens.

word-wrap est-il identique à overflow-wrap ?

Oui. La propriété a d'abord vu le jour sous la forme d'une extension Microsoft nommée word-wrap, a ensuite reçu le nom standard overflow-wrap, et les navigateurs acceptent toujours l'ancien nom comme alias du nouveau. Écrivez overflow-wrap dans tout nouveau code ; les navigateurs actuels n'ont pas besoin de word-wrap comme solution de repli, et les feuilles de style qui déclarent les deux ne font que définir deux fois la même propriété.

Quand faut-il utiliser une espace de largeur nulle plutôt que l'élément wbr ?

Utilisez l'espace de largeur nulle (U+200B, écrite sous la forme de la référence ​) lorsque vous ne pouvez modifier que la chaîne elle-même, par exemple pour du contenu stocké dans un CMS ou renvoyé par une API, et utilisez l'élément wbr lorsque vous maîtrisez le HTML. L'espace de largeur nulle est un caractère invisible qui reste dans le texte : elle voyage donc avec les copier-coller et peut perturber les recherches par correspondance exacte.

Que se passe-t-il dans les navigateurs qui ne prennent pas en charge text-wrap: pretty ?

La déclaration est tout simplement ignorée et le texte passe à la ligne selon l'algorithme ligne par ligne par défaut : rien ne casse visuellement. CSS écarte les déclarations dont il ne reconnaît pas les valeurs, ce qui fait de text-wrap: pretty et text-wrap: balance des améliorations progressives sans risque : les navigateurs compatibles obtiennent de meilleures coupures de ligne, et tous les autres affichent exactement la même chose qu'avant. Aucune requête de fonctionnalité ni déclaration de repli n'est nécessaire.