CSS-Eigenschaft overflow-x

Die Eigenschaft overflow-x definiert, ob der Inhalt ausgeblendet, sichtbar oder horizontal gescrollt werden soll, wenn der Inhalt den linken und rechten Rand des Elements überläuft.

Die Eigenschaft overflow-x hat vier Werte: visible, hidden, scroll, auto.

Anfangswert visible
Gilt für Blockcontainer, Flexcontainer und Gittercontainer
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.overflowX = "visible";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-x</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Ein Beispiel mit dem Wert "visible":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-x</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Ein Beispiel mit dem Wert "hidden":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-x</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Ein weiteres Beispiel mit dem Wert "auto":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.example {
      background-color: #1c87c9;
      color: #fff;
      width: 40px;
      overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow-x</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Ein anderes Beispiel, wo alle Werte verwendet sind:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft overflow-x</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
    <h3>overflow-x: auto</h3>
    <div class="auto">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
    <h3>overflow-x: visible</h3>
    <div class="visible">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</div>
  </body>
</html>

Werte

Wert Beschreibung
visible Der Inhalt wird nicht abgeschnitten und gerendert außerhalb des linken und rechten Randes der Polsterbox. Das ist der Standardwert dieser Eigenschaft.
hidden Der Inhalt wird so zugeschnitten, dass er horizontal in die Polsterbox passt. Es wurde keine Scrollbar hinzugefügt.
scroll Der Inhalt wird so zugeschnitten, dass er horizontal in das Polsterfeld passt. Die Scrollbar wird hinzugefügt, um den Rest des Inhalts zu sehen.
auto Der Inhalt wird so zugeschnitten, dass er horizontal in die Polsterbox passt. Hängt vom Browser ab. Wenn Inhalte überlaufen, wird eine Scrollbar hinzugefügt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

1.0+ 12.0+ 3.5+ 3.0+ 9.5+


Finden Sie das nützlich?

Ähnliche Artikel