Utilitaires

Débordement

Les classes overflow-* décident de ce qui se passe quand le contenu dépasse la boîte : coupé, défilant ou visible. Elles existent pour les deux axes ensemble ou chacun séparément.

Défilement automatique et masquage#

Quatre valeurs de base, ici sur une boîte de 6 rem de haut contenant plus de lignes qu’elle ne peut en afficher.

overflow-auto

Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA, paiement de 12 500 FCFA, dépôt de 300 000 FCFA.

overflow-hidden

Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA, paiement de 12 500 FCFA, dépôt de 300 000 FCFA.

overflow-visible

Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA.

overflow-scroll

Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA, paiement de 12 500 FCFA, dépôt de 300 000 FCFA.

<div class="row g-3">
  <div class="col-sm-6 col-lg-3">
    <p class="small mb-1"><code>overflow-auto</code></p>
    <div class="overflow-auto bg-body-secondary border p-3" style="height: 6rem" tabindex="0" role="region" aria-label="Historique défilant (overflow-auto)">Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA, paiement de 12 500 FCFA, dépôt de 300 000 FCFA.</div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <p class="small mb-1"><code>overflow-hidden</code></p>
    <div class="overflow-hidden bg-body-secondary border p-3" style="height: 6rem">Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA, paiement de 12 500 FCFA, dépôt de 300 000 FCFA.</div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <p class="small mb-1"><code>overflow-visible</code></p>
    <div class="overflow-visible bg-body-secondary border p-3" style="height: 6rem">Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA.</div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <p class="small mb-1"><code>overflow-scroll</code></p>
    <div class="overflow-scroll bg-body-secondary border p-3" style="height: 6rem" tabindex="0" role="region" aria-label="Historique défilant (overflow-scroll)">Historique : virement reçu de 150 000 FCFA, prélèvement de 25 000 FCFA, retrait de 40 000 FCFA, paiement de 12 500 FCFA, dépôt de 300 000 FCFA.</div>
  </div>
</div>

Un seul axe#

Les classes overflow-x-* et overflow-y-* agissent sur un seul axe, par exemple pour faire défiler horizontalement un long tableau de mensualités.

Mensualité 1 : 85 000 FCFA Mensualité 2 : 85 000 FCFA Mensualité 3 : 85 000 FCFA Mensualité 4 : 85 000 FCFA Mensualité 5 : 85 000 FCFA Mensualité 6 : 85 000 FCFA

<div class="overflow-x-auto bg-body-secondary border p-3" tabindex="0" role="region" aria-label="Contenu défilant horizontalement">
  <div class="d-flex gap-3 text-nowrap">
    <span>Mensualité 1 : 85 000 FCFA</span>
    <span>Mensualité 2 : 85 000 FCFA</span>
    <span>Mensualité 3 : 85 000 FCFA</span>
    <span>Mensualité 4 : 85 000 FCFA</span>
    <span>Mensualité 5 : 85 000 FCFA</span>
    <span>Mensualité 6 : 85 000 FCFA</span>
  </div>
</div>

Classes disponibles

Ces classes ne sont pas déclinées par point de rupture.

Classes disponibles
Classe	Propriété CSS
`overflow-auto`, `overflow-hidden`, `overflow-visible`, `overflow-scroll`	`overflow` (`auto`, `hidden`, `visible`, `scroll`)
`overflow-x-auto`, `-hidden`, `-visible`, `-scroll`	`overflow-x`
`overflow-y-auto`, `-hidden`, `-visible`, `-scroll`	`overflow-y`

Bonnes pratiques

À faire

Utilisez overflow-auto plutôt que overflow-scroll : les barres n’apparaissent que si le contenu dépasse.
Pour une ligne de texte tronquée avec des points de suspension, voyez Troncature de texte.

À éviter

Évitez overflow-hidden sur un conteneur dont le contenu doit rester lisible : une information peut disparaître sans avertissement.

Accessibilité

Une zone qui défile doit être atteignable au clavier : ajoutez tabindex="0", role="region" et un aria-label (sauf si elle contient déjà un élément focalisable).
Une zone qui défile au clavier doit pouvoir recevoir le focus (ajoutez tabindex="0" et un aria-label ou role="region").