CSS / Tronquer un texte sur une ou plusieurs lignes

Pour raccourcir visuellement un texte long avec CSS, utilisez text-overflow: ellipsis pour une seule ligne et les propriétés line-clamp pour limiter plusieurs lignes. CSS ne supprime pas la chaîne d'origine ni ne retourne un nombre fixe de caractères. La largeur disponible, le retour à la ligne et le débordement doivent fonctionner ensemble pour que la troncature apparaisse.

Distinguer troncature visuelle et modification du texte

Limiter un titre à une ligne ou un résumé de carte à trois lignes diffère de l'utilisation des 20 premiers caractères comme données. Utilisez le CSS pour la limite visuelle et le JavaScript ou le traitement côté serveur pour une véritable opération sur la chaîne. Le texte caché reste dans le document, donc le CSS ne réduit pas la longueur réelle des données ni la taille de transfert.

Comparer une et trois lignes avec un exemple complet

Enregistrez le code complet ci-dessous sous le nom truncate.html en UTF-8 et ouvrez-le dans un navigateur. Aucune bibliothèque ni serveur n’est nécessaire. La phrase répétée rend le texte suffisamment long, et la carte a une largeur maximale de 24rem. Enregistrez et rechargez après modification, puis comparez les fenêtres plus larges et plus étroites.

<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Comparer la troncature sur une et plusieurs lignes</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Comparer la troncature sur une et plusieurs lignes</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. </p></div><span class="badge">A</span></div>
<details>
<summary>Lire le texte complet</summary>
<p class="sample full">Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. Cet exemple affiche un long titre et un résumé dans une carte limitée. Même si une partie du texte est masquée, le passage complet reste disponible dans la section dépliable ci-dessous. </p>
</details>
</div>
</body>
</html>

Attendez-vous à une troncature d’une ligne dans la première boîte, au maximum trois lignes dans la seconde là où c’est possible, et une troncature d’une ligne à l’intérieur de Flexbox dans la troisième. Ouvrez la section extensible ci-dessous pour lire le passage complet. Le texte court peut ne jamais atteindre une limite et donc ne montrer aucun point de suspension. Le retour à la ligne réel dépend de la police, du contenu et de la largeur disponible.

Conditions des points de suspension sur une ligne

La troncature sur une seule ligne nécessite que le texte dépasse son espace horizontal. white-space: nowrap empêche le retour à la ligne, overflow: hidden masque l'excédent et text-overflow: ellipsis marque la fin tronquée. Voici la règle .one complète de l'exemple.

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

Définir uniquement text-overflow ne force pas le débordement ni ne rend la boîte plus étroite. La carte parente contraint la largeur ici. Si une boîte continue de croître avec son contenu, ou si le texte est suffisamment court, aucun point de suspension n'apparaît. Les éléments en ligne ordinaires peuvent ne pas se comporter comme prévu ; vérifiez la boîte en bloc et le contexte de mise en page réel. Explication MDN de text-overflow

Limiter plusieurs lignes et prévoir une hauteur de repli

Ajouter uniquement text-overflow: ellipsis ne place pas de points de suspension à la fin de la troisième ligne. L'exemple combine les déclarations de compatibilité héritées -webkit-line-clamp: 3, display: -webkit-box et -webkit-box-orient: vertical, ainsi que le débordement caché. Voici sa règle .three.

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Avec une taille de police de 16 px et une hauteur de ligne de 1,6 ici, une ligne mesure 25,6 px de haut et trois lignes occupent 76,8 px, soit 4,8 em. max-height: 4.8em limite la hauteur même si le clamp n'est pas disponible. Une limite de hauteur seule ne garantit pas un point de suspension. Ce calcul suppose la taille de police et la hauteur de ligne cohérentes de l'exemple, sans padding ni bordure séparés sur l'élément texte.

La propriété line-clamp non préfixée a une prise en charge variable selon les navigateurs, donc vérifiez le tableau de compatibilité et le rendu dans vos environnements cibles. Appliquez-la progressivement avec une requête de fonctionnalité si nécessaire, et vérifiez la compatibilité avant de remplacer les déclarations de compatibilité. Pour comparer deux lignes, modifiez à la fois le nombre de clamp et la hauteur de repli à 2 et 3,2 em, puis rétablissez les valeurs originales. Informations de compatibilité et de support de line-clamp sur MDN

Quand les éléments ne rétrécissent pas dans Flexbox ou Grid

La largeur minimale automatique d’un élément flexible peut le maintenir lié à la taille de son contenu, empêchant un rétrécissement suffisant à mesure que son parent se rétrécit. L’exemple donne à .grow à la fois flex: 1 et min-width: 0 afin qu’il puisse rétrécir. Appliquez la troncature à .one, qui contient réellement le texte.

Supprimez temporairement la propriété min-width de .grow dans les outils de développement, comparez et restaurez-la. Ce n'est pas une exigence universelle pour chaque élément flex ; inspectez la taille minimale réelle et les conditions de débordement. Pour les problèmes de taille minimale automatique dans Grid, vérifiez la largeur minimale de l'élément et envisagez une définition de piste flexible telle que minmax(0, 1fr) lorsque cela est approprié. Explication MDN des tailles minimales automatiques dans min-width

Donner accès au texte complet

Fournir un moyen de lire le contenu caché. Les éléments details et summary de l'exemple sont des éléments HTML natifs qui fonctionnent avec la souris, le toucher et le clavier sans JavaScript. Une interface réelle peut à la place fournir un lien vers la page de détail ou un autre contrôle d'extension clair.

1. Ne vous fiez pas uniquement à une info-bulle de souris avec attribut title pour lire le contenu complet. Les utilisateurs tactiles et au clavier doivent également y avoir accès.
2. La manière dont le texte caché est exposé lorsqu'il est copié ou lu par une technologie d'assistance peut varier. Vérifiez que le texte nécessaire reste lisible et que le focus fonctionne sur le contrôle d'expansion.
3. Vérifiez les écrans mobiles, le zoom et les polices sélectionnées par l'utilisateur. Ne promettez pas un nombre fixe de caractères ou de mots et évitez d'appliquer un découpage aux informations essentielles, aux boutons ou aux champs de saisie.