Comment tronquer du texte en CSS

Pour tronquer du texte en CSS, utilisez text-overflow: ellipsis pour couper une seule ligne et line-clamp pour limiter le texte à un nombre fixe de lignes — cette distinction à elle seule détermine tout le reste.

Si vous avez déjà vu un titre de carte déborder largement de son conteneur pendant que text-overflow: ellipsis ne faisait strictement rien, vous connaissez déjà la frustration. L’échec se résume presque toujours à l’une de deux causes : la mauvaise technique pour le nombre de lignes souhaité, ou un parent flex qui refuse silencieusement de rétrécir. La troncature sur une seule ligne nécessite trois déclarations qui fonctionnent ensemble ; la troncature multi-ligne nécessite le trio -webkit-box. Les points qui posent réellement problème en production sont bien délimités : l’ellipse échoue silencieusement dans flexbox, le clamping multi-ligne échoue si le texte ne peut pas se replier, et la troncature en JavaScript détruit discrètement le contenu dont les lecteurs d’écran ont besoin. Cet article passe en revue chaque approche fonctionnelle et l’écueil qui lui est associé.

Voici la règle de décision sous forme de tableau :

Comment tronquer une seule ligne de texte ?

Pour tronquer une seule ligne de texte, trois déclarations doivent fonctionner ensemble : white-space: nowrap empêche le retour à la ligne, overflow: hidden coupe ce qui déborde, et text-overflow: ellipsis ajoute le …. Supprimez l’une des trois et l’effet est rompu : text-overflow seul ne fait rien sur du texte qui se replie, et sans overflow: hidden il n’existe pas de boîte de découpe contre laquelle l’ellipse peut s’appuyer.

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

L’élément doit également avoir une largeur contraignante. Si le conteneur est suffisamment large pour afficher toute la chaîne sur une seule ligne, rien ne déborde et aucune ellipse n’apparaît : c’est la largeur du parent qui force la troncature. Appliquez ceci aux cartes, cellules de tableau, éléments de navigation ou titres qui doivent rester sur une seule ligne.

La propriété text-overflow accepte clip (la coupure nette par défaut), ellipsis, et une <string> personnalisée. Il existe également un mot-clé fade et une fonction fade(), ajoutés à la norme dans CSS Overflow Level 4 et désormais répertoriés dans la syntaxe formelle de MDN, mais pratiquement aucun navigateur ne les implémente — n’y comptez donc pas en production.

Comment tronquer du texte sur plusieurs lignes ?

Pour la troncature multi-ligne, définissez display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N et overflow: hidden. Malgré les préfixes propriétaires, cette combinaison est prise en charge par tous les navigateurs majeurs et constitue l’approche fiable pour la production aujourd’hui.

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

Conservez overflow: hidden. Comme MDN le précise, sans lui le texte n’est pas réellement coupé, mais l’ellipse apparaît tout de même après le nombre de lignes défini — vous vous retrouvez donc avec l’ellipse et le texte débordant tous deux visibles en dessous. Ces propriétés préfixées sont également interdépendantes : -webkit-line-clamp n’a d’effet que lorsque display est -webkit-box (ou -webkit-inline-box) et -webkit-box-orient est vertical. Les propriétés préfixées sont officiellement dépréciées, mais cette dépendance à trois niveaux constitue elle-même un comportement spécifié que les navigateurs continueront de prendre en charge — les utiliser en production ne présente donc aucun risque réel.

Un cas d’échec à surveiller : le clamping multi-ligne ne fonctionne que si le texte est autorisé à se replier. Un white-space: nowrap hérité le cassera silencieusement, en réduisant tout à une seule ligne. Maintenez white-space à normal ou pre-wrap.

Il existe également une propriété line-clamp standard sans préfixe, définie dans le module CSS Overflow Level 4, qui limite le contenu d’un bloc à un nombre défini de lignes. En 2026, elle est toutefois toujours marquée comme non Baseline, certains navigateurs largement utilisés ne la prenant pas encore en charge. Traitez-la comme une amélioration progressive. Ajoutez-la aux côtés des déclarations préfixées, sans les remplacer :

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* standardisé, à ajouter en complément — pas encore un remplacement */
  overflow: hidden;
}

Pourquoi l’ellipse échoue dans flexbox (et grid)

L’ellipse échoue silencieusement sur un enfant flex car la valeur par défaut min-width: auto d’un élément flex refuse de rétrécir en dessous de la largeur de son contenu — l’élément ne devient donc jamais assez étroit pour déborder, et text-overflow n’a rien à couper. L’enfant dépasse son conteneur au lieu d’être tronqué. La correction tient en une seule déclaration sur l’enfant :

.card { display: flex; }

.card__label {
  min-width: 0; /* remplace le minimum automatique pour que l'élément puisse rétrécir */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Le dimensionnement minimum automatique min-width: auto s’applique également aux éléments grid — la troncature dans une piste CSS Grid échoue pour la même raison. La correction est identique : définissez min-width: 0 sur l’enfant (ou overflow: hidden, qui lève également le minimum automatique). Il s’agit du bug de troncature le plus courant en production : le CSS semble correct en isolation et ne se casse qu’une fois l’élément placé dans un contexte flex ou grid.

Équivalents Tailwind

Tailwind propose les deux approches sous forme d’utilitaires, sans plugin requis. L’utilitaire truncate est un composite qui définit overflow: hidden, text-overflow: ellipsis et white-space: nowrap : la recette complète pour une seule ligne en une seule classe. Pour plusieurs lignes, line-clamp-<n> (par exemple line-clamp-3, ou line-clamp-none pour désactiver) génère le trio -webkit-box. Les utilitaires line-clamp font partie du cœur de Tailwind depuis la v3.3 ; la version stable actuelle est la v4.3.3 (juillet 2026), rien de supplémentaire n’est donc à installer.

<p class="truncate">Une seule ligne, coupée avec une ellipse…</p>
<p class="line-clamp-3">Plusieurs lignes, limitées à trois…</p>

Dans un enfant flex ou grid, ajoutez min-w-0 : l’équivalent utilitaire de la correction min-width: 0.

Accessibilité : troncature CSS vs troncature JS

La troncature CSS étant purement présentationnelle, la chaîne complète reste dans le DOM et les lecteurs d’écran la lisent intégralement, sans qu’un aria-label soit nécessaire. C’est la différence décisive avec la troncature JavaScript : une approche text.substring(0, 50) réécrit le nœud DOM, supprimant le texte coupé pour tout le monde, y compris les technologies d’assistance, sauf si vous le préservez séparément avec un attribut title ou aria-label.

Même avec CSS, la troncature masque visuellement de l’information. Les enregistrements de sessions en production révèlent régulièrement ce type de problème : un utilisateur qui survole ou plisse les yeux sur une cellule de tableau ou un élément de navigation tronqué qui cache précisément le détail dont il avait besoin. Pour tout contenu porteur d’information, associez la troncature à un attribut title ou à un mécanisme d’expansion :

<span class="truncate" title="Rapport de revenus trimestriels — Région EMEA, T3 2026">
  Rapport de revenus trimestriels — Région EMEA, T3 2026
</span>

Une limitation à connaître : l’ellipse de -webkit-line-clamp n’est pas personnalisable et text-overflow ne s’y applique pas, cette propriété n’affectant que le débordement en ligne. Si vous avez besoin d’un indicateur de troncature personnalisé sur du texte multi-ligne, c’est le signe qu’il faut adopter une approche différente plutôt que de lutter contre le clamping.

Utilisez text-overflow: ellipsis pour une seule ligne et le trio line-clamp pour plusieurs, pensez à min-width: 0 dès que l’élément se trouve dans un contexte flex ou grid, et ajoutez un title partout où le texte masqué a une signification. Cela couvre les approches qui fonctionnent correctement en production et les trois qui échouent silencieusement.

FAQ

Quelle est la différence entre text-overflow: ellipsis et line-clamp ?

Utilisez text-overflow: ellipsis pour couper une seule ligne et line-clamp pour limiter le texte à un nombre fixe de lignes. La troncature sur une seule ligne nécessite trois déclarations combinées : white-space: nowrap, overflow: hidden et text-overflow: ellipsis. Le clamping multi-ligne nécessite le trio -webkit-box ainsi que overflow: hidden et ne répond pas du tout à text-overflow, cette propriété n'affectant que le débordement en ligne.

Pourquoi ma troncature avec ellipse ne fonctionne-t-elle pas dans un flexbox ou un grid ?

La valeur par défaut min-width: auto d'un élément flex ou grid refuse de rétrécir en dessous de la largeur de son contenu — l'élément ne devient donc jamais assez étroit pour déborder et text-overflow n'a rien à couper. Définir min-width: 0 sur cet enfant remplace le minimum automatique et rétablit la troncature. Appliquer overflow: hidden à l'enfant lève également le minimum automatique. Il s'agit du bug de troncature le plus courant en production, car le CSS semble correct en isolation.

La propriété line-clamp sans préfixe est-elle sûre à utiliser seule en 2026 ?

Non. La propriété line-clamp standardisée sans préfixe est définie dans le module CSS Overflow Level 4, mais en 2026 MDN la signale comme non Baseline car elle ne fonctionne pas dans certains des navigateurs les plus utilisés. Ajoutez-la aux côtés des déclarations -webkit-box, -webkit-box-orient et -webkit-line-clamp en tant qu'amélioration progressive, sans les remplacer. Le trio préfixé reste l'approche fiable pour la production aujourd'hui.

La troncature CSS nuit-elle à l'accessibilité pour les lecteurs d'écran ?

Non. La troncature CSS est purement présentationnelle : la chaîne complète reste dans le DOM et les lecteurs d'écran la lisent intégralement, sans qu'un aria-label soit nécessaire. Le problème vient de la troncature JavaScript : une approche par substring réécrit le nœud DOM, supprimant le texte coupé pour tout le monde, y compris les technologies d'assistance, sauf si vous le préservez avec un attribut title ou aria-label. Pour tout contenu porteur d'information, associez la troncature CSS à un attribut title ou à un mécanisme d'expansion.