text-overflow et l'ellipsis en CSS : les trois propriétés qu'il faut vraiment combiner

Un titre d'article trop long qui casse la mise en page d'une carte, un nom de fichier qui déborde d'un menu étroit : la solution la plus courante est de couper le texte et de terminer par trois petits points, un rendu si familier qu'on croit souvent qu'une seule propriété CSS suffit à l'obtenir. Ce n'est pas le cas.

text-overflow ne fonctionne jamais seule. Elle a besoin de deux complices, white-space et overflow, sans lesquels elle ne produit strictement aucun effet visible, ce qui explique une bonne partie des questions posées sur le sujet.

Définition

text-overflow détermine comment un texte qui déborde de sa boîte est signalé visuellement lorsqu'il est coupé. Sa valeur la plus utilisée, ellipsis, remplace le texte coupé par trois points de suspension.

.titre-carte {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Les trois propriétés nécessaires ensemble

Chacune de ces trois propriétés joue un rôle précis, et retirer l'une d'elles annule tout l'effet, sans provoquer la moindre erreur visible dans la console.

Sans white-space: nowrap;, le texte revient simplement à la ligne suivante au lieu de déborder, et il n'y a donc rien à couper. Sans overflow: hidden;, rien n'est masqué, et text-overflow n'a aucun débordement sur lequel agir. La boîte a aussi besoin d'une largeur définie, ou d'une largeur limitée par son conteneur : un élément dont la largeur s'ajuste librement à son contenu ne débordera jamais, et la troncature ne se déclenchera pas.

Un exemple concret dans une carte

Voici un cas typique : le titre d'une carte de blog, qui ne doit jamais dépasser sur une seule ligne, quelle que soit la longueur réelle du titre de l'article.

.carte {
  width: 280px;
}

.carte h3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Avec ce réglage, un titre court s'affiche normalement, et un titre trop long pour tenir dans les 280 pixels de la carte se coupe automatiquement et se termine par des points de suspension, sans jamais faire déborder la mise en page.

Le piège d'une des trois propriétés oubliée

C'est l'erreur la plus fréquente sur ce sujet : copier text-overflow: ellipsis; depuis un exemple trouvé en ligne, sans les deux autres propriétés qui l'accompagnaient. Le résultat est un texte qui déborde simplement de sa boîte, sans aucun point de suspension, et sans le moindre message d'erreur pour indiquer ce qui manque.

Tronquer plusieurs lignes avec -webkit-line-clamp

Le trio précédent ne fonctionne que sur une seule ligne. Pour couper un texte après plusieurs lignes, par exemple un résumé d'article limité à trois lignes, une autre technique entre en jeu, -webkit-line-clamp, qui malgré son préfixe historique est aujourd'hui largement supportée par les navigateurs modernes.

.resume {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Ce réglage exige une valeur particulière de display, -webkit-box, différente du bloc ou du flex habituel, ce qui en fait une technique à part plutôt qu'une simple extension du trio précédent. white-space et text-overflow ne servent à rien ici : c'est -webkit-line-clamp qui indique le nombre de lignes autorisées avant la coupure.

Questions fréquentes

C'est presque toujours parce qu'il manque white-space: nowrap;, overflow: hidden;, ou une largeur définie sur la boîte. Les trois conditions doivent être réunies en même temps, aucune n'est optionnelle pour obtenir l'effet.

La propriété standard text-overflow se limite à ellipsis ou à clip, qui coupe sans rien ajouter. Certains navigateurs acceptent une chaîne de caractères personnalisée entre guillemets, mais ce n'est pas un comportement garanti partout, donc peu utilisé en pratique.

Son support s'est largement généralisé ces dernières années, y compris hors des navigateurs historiquement basés sur WebKit, malgré son préfixe. Il reste néanmoins prudent de vérifier son comportement sur les navigateurs ciblés par un projet avant de s'appuyer dessus pour un élément critique de l'interface.

Non, le texte complet reste présent dans le HTML et reste lisible par un lecteur d'écran, seule sa présentation visuelle est raccourcie. C'est un avantage net sur une solution qui couperait réellement le texte côté serveur avant de l'envoyer à la page.