CSS-Eigenschaft overflow

Die Eigenschaft overflow definiert den Verhalten des Inhalts, der die Elementbox überläuft.

Es gibt an, ob der Inhalt beschnitten werden soll, um in den Rahmen zu passen, oder ob Scrollbalken auf dem Element hinzugefügt werden sollen.

Es ist eine Abkürzung für:

Der Inhalt läuft über, wenn der Container eine eingestellte Höhe und Breite hat.

Die Eigenschaft overflow hat folgende Werte

  • visible
  • hidden
  • scroll
  • auto
  • overlay
Der Wert "Overlay" ist veraltet.
Anfangswert visible
Gilt für Block-Containers, Flex-Containers und Gitter-Containers
Geerbt Nein
Animierbar Nein
Version CSS2
DOM Syntax Object.style.overflow = "auto";

Syntax

overflow: visible | hidden | scroll | auto | overlay | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow</h2>
    <h3>overflow: visible</h3>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</p>
  </body>
</html>

Ein anderes Beispiel mit dem Wert "scroll":

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow</h2>
    <h3>overflow: scroll</h3>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</p>
  </body>
</html>

Ein Beispiel mit dem Wert "hidden", der den Inhalt auf die Box zuschneidet:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
      background-color: #ccc;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow</h2>
    <h3>overflow: hidden</h3>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</p>
  </body>
</html>

Ein anderes Beispiel mit allen Werten der Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      div.scroll {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: scroll;
      }
      div.hidden {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: hidden;
      }
      div.auto {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: auto;
      }
      div.visible {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: visible;
      }
      div.overlay {
      background-color: #eee;
      width: 300px;
      height: 200px;
      overflow: overlay;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft overflow</h2>
    <h3>overflow: scroll</h3>
    <div class="scroll">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</div>
    <h3>overflow: hidden</h3>
    <div class="hidden">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</div>
    <h3>overflow: auto</h3>
    <div class="auto">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</div>
    <h3>overflow: visible</h3>
    <div class="visible">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</div>
    <br/>
    <br/>
    <h3>overflow: overlay</h3>
    <div class="overlay">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. Es wurde in den 1960er Jahren mit der Veröffentlichung von Letraset-Blättern mit Lorem-Ipsum-Passagen und in jüngster Zeit mit Desktop-Publishing-Software wie Aldus PageMaker mit Versionen von Lorem Ipsum.</div>
  </body>
</html>

Werte

Wert Beschreibung
visible Der Inhalt wird nicht abgeschnitten und wird außerhalb der Polsterbox dargestellt. Das ist der Standardwert dieser Eigenschaft.
hidden Der Inhalt wird so zugeschnitten, dass er auf die Polsterbox passt.
scroll Die Scrollbar wird hinzugefügt, um den Rest des Inhalts zu sehen.
auto Hängt vom Browser ab. Wenn Inhalte überlaufen, wird eine Scrollbar hinzugefügt.
overlay Wirkt wie auto, aber mit den Scrollbalken, die über dem Inhalt gezeichnet sind, anstatt Platz einzunehmen.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Übe dein Wissen

Was sind die möglichen Werte für die CSS-Eigenschaft 'overflow'?
Finden Sie das nützlich?