overflow

Übersicht

Die overflow Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.

Standardwert: visible
Anwendbar auf: block, inline und table-cell Elemente
Vererbbar: Nein
Prozentwerte: Nein
Medium: visuell
berechneter Wert: wie festgelegt

Syntax

overflow: visible | hidden | scroll | auto | inherit

Werte

visible: Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.
hidden: Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.
scroll: Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.
auto: Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.
inherit: Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen

-moz-scrollbars-none: stattdessen overflow:hidden
-moz-scrollbars-horizontal: Verwendung von overflow-x und overflow-y wird bevorzugt.
-moz-scrollbars-vertical: Verwendung von overflow-x und overflow-y wird bevorzugt.
-moz-hidden-unscrollable: Deaktiviert das Scrollen für das Wurzelelement (<html>, <body>) und ist nur für interne Zwecke gedacht (z.B. Themes).

Beispiele

p {  
     width: 12em;
     height: 6em;
     border: dotted;
     overflow: auto;   /* Scrollbalken erscheinen nur wenn nötig */ 
}

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
wenig Text

overflow: visible
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Hinweise

Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die overflow Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<thead> , <tbody> , <tfoot>). Dieses Verhalten wurde in späteren Versionen korrigiert.

Browser Kompatibilität

Browser	ab Version
Internet Explorer	4.0 [*]
Firefox (Gecko)	1.0 (1.0)
Opera	4.0-7.0
Safari (WebKit)	1.1 (85)

[*] Der Internet Explorer von Version 4 bis 6 vergrößert das Element, wenn overflow:visible gesetzt ist, damit der Inhalt hinein passt.
Dadurch verhalten sich height/width wie min-height/min-width.

Spezifikation

CSS 2.1 Visual effects #overflow
CSS 3 Box #overflow (Working Draft)

Siehe auch

overflow-x, overflow-y