Propriété CSS overflow-x

La propriété overflow-x spécifie si le contenu doit être masqué, visible ou défiler horizontalement lorsque le contenu dépasse les bords gauche et droit de l'élément.

La propriété overflow-x a quatre valeurs: visible, hidden, scroll, auto.

Valeur initiale visible
Appliquée à Conteneurs bloc, flex et ceux de la grille.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.overflowX = "visible";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-x</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Exemple avec la valeur "visible":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-x </h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Exemple avec la valeur "hidden":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-x</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Exemple avec la valeur "auto":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-x</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Exemple dans lequel toutes les quatres valeurs sont comprises:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.scroll {
      background-color: #ccc;
      width: 50px;
      overflow-x: scroll;
      }
      div.hidden {
      background-color: #ccc;
      width: 50px;
      overflow: hidden;
      }
      div.auto {
      background-color: #ccc;
      width: 50px;
      overflow: auto;
      }
      div.visible {
      background-color: #ccc;
      width: 50px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-x </h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <h3>overflow-x: auto</h3>
    <div class="auto">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    <h3>overflow-x: visible</h3>
    <div class="visible">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
  </body>
</html>

Valeurs

Valeur Description
visible Le contenu n'est pas tronqué et s'affiche en dehors des zones de remplissage des bords gauche et droit. C'est la valeur initiale de cette propriété.
hidden Le contenu est coupé pour s’ajuster horizontalement dans la zone de remplissage. Aucune barre de défilement n'est ajoutée.
scroll Le contenu est coupé pour s’ajuster horizontalement dans la zone de remplissage. La barre de défilement est ajoutée pour voir le reste du contenu.
auto Le contenu est coupé pour s’ajuster horizontalement dans la zone de remplissage. Dépend du navigateur. Si le contenu déborde, la barre de défilement est ajoutée.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément.

Support de Navigateurs

1.0+ 12.0+ 3.5+ 3.0+ 9.5+


Trouvez-vous cela utile?

Articles Associées