Docs CSS exécutables : Overflow CSS

Q: Quelle est la différence entre overflow auto et scroll ?

scroll réserve toujours les barres de défilement, même quand le contenu tient. auto n'affiche une barre de défilement que lorsque le contenu est plus grand que la boîte, ce que l'on veut en général.

Q: Comment rendre une div scrollable ?

Limitez sa taille et autorisez le défilement : max-height: 300px; overflow-y: auto;. Sans limite de hauteur ou de max-height, la div grandit avec son contenu et ne déborde jamais.

Q: Pourquoi overflow-x: hidden ajoute-t-il aussi une barre de défilement verticale ?

Si un axe vaut hidden, scroll ou auto, une valeur visible sur l'autre axe est calculée comme auto. Utilisez plutôt overflow-x: clip, qui ne crée pas de conteneur de défilement et laisse l'autre axe visible.

Q: Comment ajouter des points de suspension (...) à un texte qui déborde ?

Pour une ligne : white-space: nowrap; overflow: hidden; text-overflow: ellipsis; sur un élément de largeur limitée. Pour plusieurs lignes, utilisez display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Ce que fait overflow

Quand le contenu est plus grand que sa boîte (une hauteur fixe, un mot long, un tableau large), il déborde. La propriété overflow décide de ce qui arrive à l'excédent :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overflow values</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
    .box {
      width: 150px; height: 50px; padding: 8px;
      border: 2px solid #2563eb; background: #eff6ff;
      margin-bottom: 60px;
    }
    .visible { overflow: visible; }
    .hidden { overflow: hidden; }
    .scroll { overflow: scroll; }
    .auto { overflow: auto; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box visible"><b>visible</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box hidden"><b>hidden</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box scroll"><b>scroll</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
    <div class="box auto"><b>auto</b>: this text is longer than its box, which is only 50px tall, so it overflows.</div>
  </div>
</body>
</html>

Valeur	Ce que vous voyez	Conteneur de défilement
`visible` (par défaut)	Le contenu sort de la boîte et recouvre ce qui suit	Non
`hidden`	Coupé au bord du padding, sans barre de défilement (un script peut encore le faire défiler)	Oui
`clip`	Coupé, sans aucun défilement possible, même par script	Non
`scroll`	Affiche toujours des barres de défilement, même si le contenu tient	Oui
`auto`	Barres de défilement seulement si le contenu ne tient pas	Oui

Sur macOS et sur téléphone, les barres de défilement se superposent au contenu et disparaissent, donc scroll et auto peuvent sembler identiques tant que vous ne faites pas défiler.

Créer une boîte scrollable

Une boîte ne déborde que si quelque chose limite sa taille. Une height ou une max-height, plus overflow-y: auto, transforme une longue liste en panneau déroulant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrollable list</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .panel {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid #d1d5db; border-radius: 8px;
    }
    .panel p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="panel" id="panel">
    <p>Message 1</p><p>Message 2</p><p>Message 3</p><p>Message 4</p>
    <p>Message 5</p><p>Message 6</p><p>Message 7</p><p>Message 8</p>
  </div>
</body>
</html>

max-height est préférable à height ici : une liste courte reste courte, et seule une longue liste défile. Une zone scrollable qui ne contient aucun élément focalisable doit recevoir tabindex="0" pour que les utilisateurs du clavier puissent aussi la faire défiler.

overflow-x et overflow-y

Les deux axes peuvent être réglés séparément. L'usage courant est un tableau large qui défile horizontalement dans son conteneur au lieu d'élargir toute la page :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal scroll</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .table-wrap { overflow-x: auto; border: 1px solid #d1d5db; max-width: 360px; }
    table { border-collapse: collapse; }
    th, td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="table-wrap" id="wrap">
    <table>
      <tr><th>Plan</th><th>Monthly</th><th>Yearly</th><th>Users</th><th>Storage</th><th>Support</th></tr>
      <tr><td>Free</td><td>$0</td><td>$0</td><td>1</td><td>1 GB</td><td>Community</td></tr>
      <tr><td>Team</td><td>$12</td><td>$120</td><td>10</td><td>100 GB</td><td>Email</td></tr>
    </table>
  </div>
</body>
</html>

Une règle à retenir : si un axe vaut hidden, scroll ou auto, une valeur visible sur l'autre axe devient auto. Ainsi, overflow-x: hidden seul peut vous donner une barre de défilement verticale inattendue. overflow-x: clip n'a pas cet effet :

.a { overflow-x: hidden; }  /* overflow-y computes to auto */
.b { overflow-x: clip; }    /* overflow-y stays visible */

Couper le texte avec des points de suspension

text-overflow: ellipsis remplace la fin coupée d'une ligne par « … ». Il faut trois choses ensemble : une largeur limitée, un texte qui ne peut pas passer à la ligne et un débordement masqué :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ellipsis</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .one-line {
      width: 240px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid #d1d5db; padding: 6px;
    }
    .three-lines {
      width: 240px; margin-top: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      border: 1px solid #d1d5db; padding: 6px;
    }
  </style>
</head>
<body>
  <div class="one-line" id="one">A very long file name that will not fit in the box.pdf</div>
  <div class="three-lines" id="three">This paragraph is longer than three lines. Only the first three lines are shown and the end of the third one becomes an ellipsis, which suits card previews and search results.</div>
</body>
</html>

Le line clamp préfixé -webkit- fonctionne dans Chrome, Firefox et Safari. Les lecteurs d'écran lisent toujours le texte complet, les mots coupés ne sont donc pas perdus pour eux.

Les effets de bord d'overflow

Donner à overflow une autre valeur que visible ou clip change plus que le découpage :

Il contient les flottants et les marges des enfants. L'élément forme un nouveau contexte de formatage de bloc et grandit pour englober ses enfants flottants. display: flow-root fait la même chose sans rien couper.
Il casse position: sticky en dessous de lui. Un enfant sticky colle au conteneur de défilement le plus proche ; si ce conteneur ne défile pas, rien ne colle.
Il coupe les enfants positionnés en absolu (quand l'élément qui déborde est aussi leur bloc conteneur), y compris les menus déroulants et les infobulles, et il coupe aussi les ombres des enfants.

Masquer la barre de défilement

Vous pouvez garder une boîte scrollable tout en masquant sa barre de défilement avec scrollbar-width: none. Utilisez-le avec parcimonie : sans barre de défilement, beaucoup de lecteurs ne comprennent pas qu'il y a plus de contenu. scrollbar-gutter: stable fait l'inverse : il réserve la place de la barre pour que le contenu ne se décale pas quand elle apparaît.

Erreurs courantes

Attendre un débordement sans limite de taille. Une boîte sans height ni max-height grandit au lieu de déborder.
overflow: hidden sur body pour « corriger » un défilement horizontal. Trouvez plutôt l'élément trop large (souvent une width fixe, une longue URL ou 100vw avec une barre de défilement).
Des points de suspension sans white-space: nowrap. Le texte passe à la ligne, rien ne déborde horizontalement et aucun point de suspension n'apparaît.
overflow-x: hidden qui crée une barre de défilement verticale. Utilisez clip.
Un menu déroulant coupé par sa carte. Le overflow: hidden de la carte le découpe ; déplacez la règle overflow ou affichez le menu en dehors.

Questions fréquentes

Que fait overflow: hidden ?

Il coupe le contenu qui ne tient pas dans la boîte de padding de l'élément, sans barre de défilement. La partie masquée peut quand même être atteinte par un script ou en donnant le focus à un élément qui s'y trouve.

Quelle est la différence entre overflow auto et scroll ?

scroll réserve toujours les barres de défilement, même quand le contenu tient. auto n'affiche une barre de défilement que lorsque le contenu est plus grand que la boîte, ce que l'on veut en général.

Comment rendre une div scrollable ?

Limitez sa taille et autorisez le défilement : max-height: 300px; overflow-y: auto;. Sans limite de hauteur ou de max-height, la div grandit avec son contenu et ne déborde jamais.

Pourquoi overflow-x: hidden ajoute-t-il aussi une barre de défilement verticale ?

Si un axe vaut hidden, scroll ou auto, une valeur visible sur l'autre axe est calculée comme auto. Utilisez plutôt overflow-x: clip, qui ne crée pas de conteneur de défilement et laisse l'autre axe visible.

Comment ajouter des points de suspension (...) à un texte qui déborde ?

Pour une ligne : white-space: nowrap; overflow: hidden; text-overflow: ellipsis; sur un élément de largeur limitée. Pour plusieurs lignes, utilisez display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.

Concepts liés