CSS-Eigenschaft overflow-x

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.