Überlauf - CSS-Tricks

Die overflowEigenschaft steuert, was mit Inhalten geschieht, die außerhalb ihrer Grenzen liegen: Stellen divSie sich einen vor, für den Sie explizit eine Breite von 200 Pixel festgelegt haben, der jedoch ein Bild mit einer Breite von 300 Pixel enthält. Dieses Bild ragt aus dem div heraus und ist visiblestandardmäßig. Wenn Sie den overflowWert auf einstellen hidden, wird das Bild bei 200 Pixel abgeschnitten.

div ( overflow: visible | hidden | scroll | auto | inherit )

Werte

• visible: Inhalt wird nicht abgeschnitten, wenn er außerhalb seiner Box fortgesetzt wird. Dies ist der Standardwert der Eigenschaft
• hidden: Überlaufender Inhalt wird ausgeblendet.
• scroll: Ähnlich wie versteckt, außer dass Benutzer durch den versteckten Inhalt scrollen können
• auto: Wenn der Inhalt außerhalb des Felds angezeigt wird, wird dieser Inhalt ausgeblendet, während eine Bildlaufleiste angezeigt werden sollte, damit Benutzer den Rest des Inhalts lesen können.
• initial: verwendet den Standardwert (is) visible
• inherit: Setzt den Überlauf auf den Wert des übergeordneten Elements.

Denken Sie daran, dass Text natürlich am Ende eines Elements umbrochen wird (es sei denn, der Leerraum wird geändert), sodass Text selten die Ursache für einen Überlauf ist. Wenn keine Höhe festgelegt ist, wird durch Text auch ein Element höher geschoben. Überlauf kommt häufiger ins Spiel, wenn explizite Breiten und Höhen festgelegt werden und es unerwünscht ist, dass Inhalte verschüttet werden oder wenn das Scrollen explizit vermieden wird.

Sichtbar

Wenn Sie die Überlaufeigenschaft überhaupt nicht festlegen, ist die Standardeinstellung sichtbar. Daher gibt es im Allgemeinen keinen Grund, diese Eigenschaft explizit auf sichtbar zu setzen, es sei denn, Sie überschreiben, dass sie nicht an anderer Stelle festgelegt wird.

Das Wichtigste dabei ist, dass der Inhalt den Seitenfluss nicht beeinflusst, obwohl er außerhalb des Rahmens sichtbar ist. Zum Beispiel:

Im Allgemeinen sollten Sie ohnehin keine statischen Höhen für Felder mit Webtext festlegen, damit diese nicht angezeigt werden.

Versteckt

Das Gegenteil der sichtbaren Standardeinstellung ist ausgeblendet . Dies verbirgt buchstäblich alle Inhalte, die über die Box hinausgehen.

Dies ist besonders nützlich bei der Verwendung mit dynamischen Inhalten und der Möglichkeit eines Überlaufs, der schwerwiegende Layoutprobleme verursacht. Beachten Sie jedoch, dass auf diese Weise verborgene Inhalte überhaupt nicht zugänglich sind (ohne die Quelle anzuzeigen). Wenn für einen Benutzer beispielsweise die Standardschriftgröße größer als erwartet eingestellt ist, können Sie Text aus einem Feld verschieben und ihn vollständig aus seiner Ansicht ausblenden.

Scrollen

Durch Festlegen des Überlaufwerts eines zu scrollenden Felds wird der Inhalt vor dem Rendern außerhalb des Felds verborgen, es werden jedoch Bildlaufleisten zum Scrollen des Inneren des Felds zum Anzeigen des Inhalts angeboten.

Bemerkenswert bei diesem Wert ist, dass Sie sowohl horizontale als auch vertikale Bildlaufleisten erhalten, egal was passiert, selbst wenn der Inhalt nur die eine oder andere erfordert.

Das Momentum-Scrollen von iOS kann für diesen Wert mit aktiviert werden -webkit-overflow-scrolling.

Hinweis: Wenn in OS X Lion die Bildlaufleisten so eingestellt sind, dass sie nur bei Verwendung angezeigt werden, scrollverhält es sich eher so auto, dass nur die erforderlichen Bildlaufleisten angezeigt werden.

Auto

Der automatische Überlauf ist dem Bildlaufwert sehr ähnlich, löst jedoch nur das Problem, Bildlaufleisten zu erhalten, wenn Sie diese nicht benötigen. Die Bildlaufleisten werden nur angezeigt, wenn Inhalte vorhanden sind, die tatsächlich aus dem Element ausbrechen.

Überlauf-x und Überlauf-y

Es ist auch möglich, den Überlauf von Inhalten horizontal oder vertikal mit den Eigenschaften overflow-xund zu overflow-ybearbeiten. In der Demo unten kann beispielsweise der horizontale Überlauf durchgeblättert werden, während der Text, der über die Höhe des Felds hinausgeht, ausgeblendet ist:

.box ( overflow-y: hidden; overflow-x: scroll; )

Float Clearing

Seltsamerweise ist das Löschen von Überläufen eine der beliebtesten Anwendungen zum Einstellen des Überlaufs. Durch Einstellen des Überlaufs wird der Float am Element nicht gelöscht, sondern selbst gelöscht. Dies bedeutet, dass das Element mit Überlauf (mit Ausnahme aller Werte visible) so groß wird, wie es untergeordnete Elemente umfasst, die schwebend sind (anstatt zu reduzieren), vorausgesetzt, die Höhe wird nicht deklariert. So was:

Eine bessere Float-Clearing-Technik ist der Clearfix, da Sie die Überlaufeigenschaft nicht so ändern müssen, wie Sie es nicht benötigen.

Blockformatierungskontext generieren

Es ist interessant festzustellen, dass dadurch overflowauch ein neuer Blockformatierungskontext erstellt wird, der nützlich ist, wenn ein Blockelement neben einem schwebenden Element ausgerichtet werden soll. Im folgenden Beispiel zeigen wir, wie eine Reihe von Absätzen standardmäßig mit einem schwebenden Bild interagieren. Anschließend overflow: hiddenrichten wir den Text in einem eigenen Feld aus:

Dies geht aus einem großartigen Beitrag von Nicole Sullivan hervor, der das Medienobjekt inspirierte.

Können Bildlaufleisten mit CSS gestaltet werden?

Früher konnten Sie Bildlaufleisten in IE (v5.5?) Gestalten, aber nicht mehr. Sie können sie jetzt wieder in WebKit-Browsern formatieren. Wenn Sie browserübergreifende benutzerdefinierte Bildlaufleisten benötigen, verwenden Sie JavaScript.

Wenn an ein Element Bildlaufleisten angehängt werden müssen, um den Überlaufwert zu berücksichtigen, werden sie von Firefox außerhalb des Elements platziert, wobei die angegebene Breite / Höhe wie angegeben beibehalten wird. IE fügt die Bildlaufleisten ein und behält die deklarierte Gesamtbreite / -höhe bei.

Demo

Demos für diesen Artikel stammen von dieser Beispielseite.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
91	87	11	88	TP

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

verbunden

• Die float-Eigenschaft

Mehr Informationen

• Den bescheidenen Clearfix verstehen
• Überlauf: ein geheimer Vorteil
• Überlauf auf MDN
• Überlauf auf W3C
• Unbeabsichtigten Körperüberlauf finden / beheben