text-wrap: balance / pretty

Définition

Propriété qui pilote l'algorithme de retour à la ligne. balance équilibre le nombre de caractères par ligne (limité à quelques lignes : six sur Chromium, dix sur Firefox), idéal pour les titres. pretty accepte un calcul plus lent pour éviter les orphelins en fin de paragraphe (Chrome 117). stable évite le reflow pendant l'édition. text-wrap est « Widely available » depuis mars 2024, avec des nuances selon la valeur.

Analogie

Le typographe qui recompose une ligne pour qu'un mot ne se retrouve pas seul en bas de page.

Exemple de code

h1, h2, blockquote {
  text-wrap: balance; /* titres courts : lignes équilibrées */
}
p {
  text-wrap: pretty;  /* corps de texte : pas d'orphelin */
}
[contenteditable] {
  text-wrap: stable;  /* les lignes avant le curseur ne bougent pas */
}

Cas d'usage

Titres de landing pages, citations, cartes : un rendu typographique propre sans <br> manuels ni JavaScript.

Anti-pattern

Termes liés

Sources

• developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap
• developer.chrome.com/blog/css-text-wrap-pretty