W3docs
de
Anmelden

CSS overflow-x-Eigenschaft

Erfahren Sie, wie die CSS-Eigenschaft overflow-x horizontales Beschneiden und Scrollen bei überlaufendem Inhalt steuert. Mit Werten, Beispielen und Browser-Tipps.

Die Eigenschaft overflow-x steuert, was mit Inhalt passiert, der über den linken und rechten Rand einer Box hinausragt. Sie können ihn überlaufen lassen, ihn lautlos abschneiden oder eine horizontale Scrollleiste hinzufügen.

overflow-x ist Teil des CSS overflow-Kurzschreibweise und arbeitet zusammen mit overflow-y, das den vertikalen Überlauf behandelt.

Info

Wenn overflow-y auf hidden, scroll oder auto gesetzt ist und overflow-x bei seinem Standardwert visible verbleibt, berechnen Browser overflow-x automatisch als auto. Ein Wert von visible kann nicht zusammen mit einem Nicht-visible-Wert auf der senkrechten Achse existieren.

Ausgangswertvisible
Gilt fürBlock-Container, flex-Container und grid-Container.
VererbtNein.
AnimierbarNein.
VersionCSS3
DOM-Syntaxobject.style.overflowX = "scroll";

Syntax

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

Werte

WertBeschreibung
visibleInhalt wird nicht abgeschnitten. Er wird außerhalb der linken und rechten Kanten des Innenabstandsbereichs gerendert. Dies ist der Standardwert.
hiddenInhalt wird an den Kanten des Innenabstandsbereichs abgeschnitten. Es wird keine Scrollleiste angezeigt, und der abgeschnittene Inhalt ist nicht zugänglich.
scrollInhalt wird abgeschnitten und eine horizontale Scrollleiste wird immer angezeigt, auch wenn der Inhalt passt.
autoInhalt wird nur abgeschnitten, wenn er überläuft. Eine Scrollleiste erscheint nur bei Bedarf. In den meisten Fällen gegenüber scroll zu bevorzugen.
clipWie hidden, verhindert jedoch auch programmatisches Scrollen über JavaScript (scrollLeft, scroll()). Wird in modernen Browsern unterstützt.
initialSetzt die Eigenschaft auf ihren Standardwert (visible) zurück.
inheritÜbernimmt den Wert vom übergeordneten Element.

Wann welchen Wert verwenden

  • visible — der Standardwert. Verwenden Sie ihn, wenn Überlauf beabsichtigt ist, zum Beispiel bei einem Tooltip oder Dropdown, das über seinen Container hinausragen muss.
  • hidden — verwenden Sie diesen Wert, um Überlauf in Design-Komponenten (Bildkarten, Slider) zu verbergen, bei denen abgeschnittener Inhalt nie erreichbar sein soll. Beachten Sie, dass abgeschnittener Inhalt für Tastatur- und Screenreader-Benutzer nicht zugänglich ist.
  • scroll — verwenden Sie diesen Wert, wenn immer eine sichtbare Scrollleiste gewünscht ist, zum Beispiel in Nebeneinandervergleichen, damit sich das Layout nicht verschiebt, wenn sich die Inhaltslänge ändert.
  • auto — die häufigste Wahl für responsive Container. Die Scrollleiste erscheint nur, wenn der Inhalt tatsächlich überläuft, wodurch das Layout sauber bleibt.
  • clip — verwenden Sie diesen Wert, wenn Sie denselben harten Schnitt wie bei hidden möchten, aber auch verhindern möchten, dass JavaScript das Element programmatisch scrollt (nützlich bei bestimmten Animationstechniken).

Praktische Muster

Ein häufiger Anwendungsfall ist ein horizontaler Scroll-Container für breite Inhalte wie Datentabellen oder Code-Blöcke. Kombinieren Sie overflow-x: auto mit white-space: nowrap (siehe white-space), um Inhalt in einer Zeile zu halten:

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

Damit das text-overflow-Ellipsis (…) funktioniert, benötigen Sie overflow-x: hidden (oder overflow: hidden) zusammen mit white-space: nowrap:

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

Beispiele

overflow-x: scroll

Der Container ist nur 40 px breit. Mit scroll wird immer eine horizontale Scrollleiste angezeigt, damit Benutzer den Rest des Textes erreichen können.

<!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>
Probier es selbst »

overflow-x: visible

Mit visible wird der Text außerhalb der schmalen Box gerendert und überlappt den umgebenden Inhalt. Dies ist das Standardverhalten des Browsers.

<!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>
Probier es selbst »

overflow-x: hidden

Mit hidden wird der Text lautlos am rechten Rand abgeschnitten. Es wird keine Scrollleiste angezeigt und der abgeschnittene Teil ist nicht erreichbar.

<!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>
Probier es selbst »

overflow-x: auto

Mit auto erscheint die Scrollleiste nur, wenn der Inhalt tatsächlich überläuft — die sauberste Option für die meisten Layouts.

<!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>
Probier es selbst »

Alle Werte im Vergleich

Das folgende Beispiel stellt alle vier Hauptwerte nebeneinander dar, sodass Sie ihre visuelle Wirkung auf einen Blick vergleichen können.

<!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>
Probier es selbst »

Verwandte Eigenschaften

  • overflow — Kurzschreibweise, die overflow-x und overflow-y gleichzeitig setzt.
  • overflow-y — steuert das vertikale (oben/unten) Überlaufverhalten.
  • overflow-wrap — legt fest, ob der Browser lange Wörter umbrechen darf, um horizontalen Überlauf zu verhindern.
  • text-overflow — steuert, wie überlaufender Text dem Benutzer signalisiert wird (z. B. Ellipsis).
  • white-space — bestimmt, ob Text umbrochen wird; die Kombination von white-space: nowrap mit overflow-x ist ein gängiges Muster.

Übungsaufgabe

Übung
Welcher Wert für overflow-x zeigt immer eine horizontale Scrollleiste an, auch wenn der Inhalt passt?
Welcher Wert für overflow-x zeigt immer eine horizontale Scrollleiste an, auch wenn der Inhalt passt?
Was this page helpful?