Exemple de la propriété CSS overflow-x avec les quatre valeurs

Source Code: (back to article)

<!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>