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.

Spezifikation

Spezifikation Status Kommentar
CSS Overflow Module Level 3
Die Definition von 'overflow' in dieser Spezifikation.		 Arbeitsentwurf

Changed syntax to allow one or two keywords instead of only one
CSS Basic Box Model
Die Definition von 'overflow' in dieser Spezifikation.		 Arbeitsentwurf No change.
CSS Level 2 (Revision 1)
Die Definition von 'overflow' in dieser Spezifikation.		 Empfehlung Initial definition.
Initialwertvisible
Anwendbar aufBlock-containers, flex containers, and grid containers
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
overflowChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise After Firefox 3.6, the overflow property is correctly applied to table group elements (<thead>, <tbody>, <tfoot>).
IE Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise From version 4 to 6, Internet Explorer enlarges an element with overflow: visible (default value) to fit the content inside it. height and width behave like min-height and min-width, respectively.
Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android ?
Multiple keyword syntax for overflow-x and overflow-y
Experimentell
Chrome Vollständige Unterstützung 68Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 61IE Keine Unterstützung NeinOpera Vollständige Unterstützung 55Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 68Chrome Android Vollständige Unterstützung 68Firefox Android Vollständige Unterstützung 61Opera Android Vollständige Unterstützung 48Safari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

Verwandte Themen