CSS/Eigenschaften/overflow

Die Eigenschaft overflow ist die Zusammenfassung der Eigenschaften overflow-x und overflow-y. Sie ermöglicht es, Inhalte größer als das Element zu machen oder den Platz für den Inhalt eines Elements zu beschränken. Wird overflow auf etwas anderes als visible oder clip eingestellt, wird für das Element ein neuer Blockformatierungskontext gebildet

Erlaubte Werte

• visible = Element wird so weit ausgedehnt, dass sein Inhalt auf jeden Fall komplett sichtbar ist
• hidden = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der Inhalt des Elements kann aber noch durch JavaScript gescrollt werden.
• clip = Ähnlich wie hidden, aber auch mit JavaScript ist kein Scrolling mehr möglich.
• scroll = Element wird abgeschnitten, wenn es die Grenzen überschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, ähnlich wie in einem eingebetteten Frame-Fenster. Diese Scroll-Leisten sind immer sichtbar.
• auto = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.
• overlay = (Nur Chromium, kein Standard) Die Scroll-Leiste wird nicht neben den Inhalt gestellt, sondern überlagert ihn.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

visible

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

aside {
  overflow: hidden;
  width: 15em;
}

Die aside-Box hat eine Breite von 15em. Darüber hinausgehender Inhalt wird nicht angezeigt.

Beachten Sie: Für die Elemente html bzw. body wird die Angabe overflow:visible als overflow:auto interpretiert.

Empfehlung: Mit CSS3 wird das Konzept von overflow erweitert. overflow ist jetzt eine Zusammenfassung der Einzeleigenschaften overflow-x und overflow-y.

Beispiel

p { overflow:   hidden visible; }

p { overflow-x: hidden;
    overflow-y: visible; }

Beide Deklarationsblöcke bewirken dasselbe.

Beachten Sie: Wenn Sie für overflow-x einen Wert festlegen, wird automatisch der Wert für overflow-y auf auto anstelle des Standardwerts visible gesetzt. Dies führt zu einer leichten vertikalen Verschiebung der nachfolgenden Elemente. Abhilfe schafft die Angabe overflow-y: visible oder overflow: [wert] visible.

Siehe auch

• CSS/Tutorials/Boxmodell/übergroßer Inhalt

Weblinks

• Spezifikation (W3C): overflow property
• MDN: overflow shorthand property