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.

Initialwert	`visible`
Anwendbar auf	Block-containers, flex containers, and grid containers
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animationstyp	diskret
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Edge Mobile	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
Grundlegende Unterstützung	Chrome Vollständige Unterstützung 1	Edge Vollständige Unterstützung 12	Firefox 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 7	Safari Vollständige Unterstützung 1	WebView Android ?	Chrome Android ?	Edge Mobile Vollständige Unterstützung Ja	Firefox Android Vollständige Unterstützung 4	Opera Android ?	Safari iOS ?	Samsung Internet Android ?
Multiple keyword syntax for `overflow-x` and `overflow-y` Experimentell	Chrome Vollständige Unterstützung 68	Edge Keine Unterstützung Nein	Firefox Vollständige Unterstützung 61	IE Keine Unterstützung Nein	Opera Vollständige Unterstützung 55	Safari Keine Unterstützung Nein	WebView Android Vollständige Unterstützung 68	Chrome Android Vollständige Unterstützung 68	Edge Mobile Keine Unterstützung Nein	Firefox Android Vollständige Unterstützung 61	Opera Android Vollständige Unterstützung 55	Safari iOS Keine Unterstützung Nein	Samsung 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

Ähnliche CSS Eigenschaften: text-overflow, white-space, overflow-x, overflow-y, clip