Aides

Troncature de texte

La classe .text-truncate coupe un texte trop long sur une seule ligne et ajoute des points de suspension (…). Elle évite les débordements dans les tableaux, les cartes et les listes.

.text-truncate combine overflow: hidden, text-overflow: ellipsis et white-space: nowrap. Elle ne fonctionne que sur un élément de type bloc ou inline-block dont la largeur est limitée : sur un élément en ligne simple, ajoutez .d-inline-block et une largeur maximale.

Bloc à largeur limitée#

Le libellé d’une opération est coupé à la largeur du bloc.

Virement permanent vers le compte épargne projet de Awa Kouassi

<div class="text-truncate border p-2" style="max-width: 18rem">
  Virement permanent vers le compte épargne projet de Awa Kouassi
</div>

Élément en ligne#

Sur un lien ou un <span>, ajoutez .d-inline-block et max-width.

Remboursement anticipé du prêt immobilier

<span class="d-inline-block text-truncate border p-2" style="max-width: 12rem">
  Remboursement anticipé du prêt immobilier
</span>

Texte tronqué dans une rangée flexible#

Dans une rangée Flexbox, ajoutez min-width: 0 (classe .overflow-hidden) à l’enfant pour qu’il puisse rétrécir et se tronquer.

Paiement carte : supermarché Prosuma, Cocody, Abidjan

12 mars, 17 h 42

− 18 750 FCFA

<div class="d-flex align-items-center gap-3 border p-2" style="max-width: 24rem">
  <div class="overflow-hidden">
    <div class="text-truncate fw-semibold">Paiement carte : supermarché Prosuma, Cocody, Abidjan</div>
    <div class="text-truncate text-body-secondary">12 mars, 17 h 42</div>
  </div>
  <div class="ms-auto text-nowrap text-danger">− 18 750 FCFA</div>
</div>

Cellule de tableau#

Dans un tableau, fixez la largeur de la cellule : une cellule tronquée ne rétrécit qu’avec .text-truncate et max-width.

Dernières opérations
Date	Libellé	Montant
12 mars	Prélèvement mensualité prêt immobilier agence Plateau	85 000 FCFA

<table class="table" style="max-width: 28rem">
  <caption class="visually-hidden">Dernières opérations</caption>
  <thead>
    <tr><th scope="col">Date</th><th scope="col">Libellé</th><th scope="col" class="text-end">Montant</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>12 mars</td>
      <td class="text-truncate" style="max-width: 10rem">Prélèvement mensualité prêt immobilier agence Plateau</td>
      <td class="text-end">85 000 FCFA</td>
    </tr>
  </tbody>
</table>

Classes et mixin

Classes et mixin
Élément	Rôle
`.text-truncate`	Applique `overflow: hidden`, `text-overflow: ellipsis` et `white-space: nowrap`.
`@include text-truncate()`	Mixin Sass équivalent pour vos propres sélecteurs.
`.d-inline-block`	Nécessaire sur un élément en ligne.
`.overflow-hidden`	Utile sur un enfant flexible pour qu’il puisse rétrécir.
`.text-nowrap`	Interdit le retour à la ligne sans ajouter de points de suspension.

Bonnes pratiques

À faire

Limitez la troncature aux informations secondaires et donnez un moyen de lire le texte complet (infobulle, détail, page dédiée).
Placez les données importantes (montant, date) hors de la zone tronquée.

À éviter

Ne tronquez pas un montant, un numéro de compte ou une information critique.
Ne tronquez pas un libellé de formulaire : l’utilisateur doit le lire en entier.

Accessibilité

Les technologies d’assistance lisent le texte complet, mais l’utilisateur voyant le texte coupé non : prévoyez un title ou un affichage du texte complet.
Un texte tronqué reste souvent illisible à fort zoom : testez à 200 %.