Propriété CSS overflow-x — Valeurs et exemples

La propriété overflow-x contrôle ce qui se passe lorsque le contenu dépasse les bords gauche et droit d'un bloc. Vous pouvez laisser le contenu déborder, le rogner silencieusement ou ajouter une barre de défilement horizontale.

overflow-x fait partie du raccourci CSS overflow et fonctionne en tandem avec overflow-y, qui gère le débordement vertical.

Info

Si overflow-y est défini sur hidden, scroll ou auto, et que overflow-x conserve sa valeur par défaut visible, les navigateurs calculent automatiquement overflow-x comme auto. Une valeur visible ne peut pas coexister avec une valeur non-visible sur l'axe perpendiculaire.

Valeur initiale	`visible`
S'applique à	Les conteneurs en bloc, les conteneurs flex et les conteneurs grid.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	`object.style.overflowX = "scroll";`

Syntaxe

overflow-x: visible | hidden | scroll | auto | clip | initial | inherit;

Valeurs

Valeur	Description
`visible`	Le contenu n'est pas rogné. Il s'affiche en dehors des bords gauche et droit de la boîte de rembourrage. C'est la valeur par défaut.
`hidden`	Le contenu est rogné aux bords de la boîte de rembourrage. Aucune barre de défilement n'est affichée et le contenu rogné est inaccessible.
`scroll`	Le contenu est rogné et une barre de défilement horizontale est toujours affichée, même si le contenu tient dans le conteneur.
`auto`	Le contenu n'est rogné que lorsqu'il déborde. Une barre de défilement n'apparaît que si nécessaire. Préférable à `scroll` dans la plupart des cas.
`clip`	Comme `hidden`, mais interdit également le défilement programmatique via JavaScript (`scrollLeft`, `scroll()`). Pris en charge par les navigateurs modernes.
`initial`	Réinitialise la propriété à sa valeur par défaut (`visible`).
`inherit`	Hérite de la valeur de l'élément parent.

Quand utiliser chaque valeur

visible — la valeur par défaut. Utilisez-la quand le débordement est intentionnel, par exemple pour une infobulle ou un menu déroulant qui doit dépasser son conteneur.
hidden — utilisez-la pour masquer le débordement dans les composants de design (cartes d'image, curseurs) où le contenu rogné ne doit jamais être accessible. Gardez à l'esprit que tout contenu coupé est inaccessible aux utilisateurs au clavier et aux lecteurs d'écran.
scroll — utilisez-la quand vous souhaitez toujours afficher une barre de défilement visible, par exemple dans des vues de comparaison côte à côte, afin que la mise en page ne se décale pas lorsque la longueur du contenu varie.
auto — le choix le plus courant pour les conteneurs adaptatifs. La barre de défilement n'apparaît que lorsque le contenu déborde réellement, gardant ainsi la mise en page propre.
clip — utilisez-la quand vous souhaitez le même rognage strict que hidden mais que vous avez également besoin d'empêcher JavaScript de faire défiler l'élément par programmation (utile dans certaines techniques d'animation).

Modèles pratiques

Un cas d'usage courant est un conteneur à défilement horizontal pour du contenu large comme des tableaux de données ou des blocs de code. Combinez overflow-x: auto avec white-space: nowrap (voir white-space) pour maintenir le contenu sur une seule ligne :

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}

Pour que l'ellipse de text-overflow (…) fonctionne, vous devez utiliser overflow-x: hidden (ou overflow: hidden) avec white-space: nowrap :

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

Exemples

overflow-x: scroll

Le conteneur ne fait que 40 px de large. Avec scroll, une barre de défilement horizontale est toujours affichée pour que les utilisateurs puissent accéder au reste du texte.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Essayez vous-même »

overflow-x: visible

Avec visible, le texte s'affiche en dehors du bloc étroit et chevauche le contenu environnant. C'est le comportement par défaut du navigateur.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Essayez vous-même »

overflow-x: hidden

Avec hidden, le texte est silencieusement rogné au bord droit. Aucune barre de défilement n'est affichée et la partie rognée est inaccessible.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Essayez vous-même »

overflow-x: auto

Avec auto, la barre de défilement n'apparaît que lorsque le contenu déborde réellement — l'option la plus propre pour la plupart des mises en page.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Essayez vous-même »

Toutes les valeurs comparées

L'exemple ci-dessous place les quatre valeurs principales côte à côte pour que vous puissiez comparer leur effet visuel en une seule fois.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow-x: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow-x: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x property example</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </body>
</html>

Essayez vous-même »

Propriétés associées

overflow — raccourci qui définit overflow-x et overflow-y en même temps.
overflow-y — contrôle le comportement du débordement vertical (haut/bas).
overflow-wrap — indique si le navigateur peut couper les mots longs pour éviter un débordement horizontal.
text-overflow — contrôle la façon dont le texte qui déborde est signalé à l'utilisateur (par ex., ellipse).
white-space — détermine si le texte revient à la ligne ; combiner white-space: nowrap avec overflow-x est un modèle courant.

Pratique

Quelle valeur de overflow-x affiche toujours une barre de défilement horizontale, même si le contenu tient dans le conteneur ?

visibleautoscrollhidden