overflow

Die overflow-Eigenschaft steuert, was mit Inhalten geschieht, die über die Grenzen eines Elements hinausgehen: Stellen Sie sich ein div vor, dessen Breite Sie explizit auf 200 Pixel gesetzt haben, das aber ein Bild mit 300 Pixel Breite enthält. Dieses Bild ragt aus dem div heraus und ist standardmäßig visible. Wenn Sie jedoch den overflow-Wert auf hidden setzen, wird das Bild bei 200 Pixel abgeschnitten.

div {
  overflow:  visible | hidden | scroll | auto | inherit
}

Werte

• visible: Inhalte werden nicht abgeschnitten, wenn sie über ihre Box hinausgehen. Dies ist der Standardwert der Eigenschaft
• hidden: Überlaufende Inhalte werden versteckt.
• scroll: Ähnlich wie hidden, nur dass Benutzer durch die ausgeblendeten Inhalte scrollen können.
• clip: Inhalte werden abgeschnitten, wenn sie über ihre Box hinausgehen. Dies kann mit overflow-clip-margin verwendet werden, um den abgeschnittenen Bereich festzulegen.
• auto: Wenn Inhalte über ihre Box hinausgehen, werden diese Inhalte versteckt, während eine Scrollleiste sichtbar sein sollte, damit Benutzer den Rest der Inhalte lesen können.
• initial: Verwendet den Standardwert, der visible ist
• inherit: Setzt den Überlauf auf den Wert seines Elternelements.

Denken Sie daran, dass Text natürlich am Ende eines Elements umbricht (es sei denn, white-space wird geändert), sodass Text selten die Ursache für Überlauf ist. Wenn keine Höhe festgelegt ist, erweitert Text ein Element einfach auch in die Höhe. Überlauf wird häufiger, wenn explizite Breiten und Höhen festgelegt sind und es unerwünscht wäre, wenn Inhalte herausragen, oder wenn das Scrollen explizit vermieden wird.

visible

Wenn Sie die Überlaufeigenschaft überhaupt nicht festlegen, ist der Standardwert sichtbar. Daher gibt es im Allgemeinen keinen Grund, diese Eigenschaft explizit auf sichtbar zu setzen, es sei denn, Sie überschreiben sie, woanders festgelegt.

Das Wichtigste hier ist, dass, obwohl der Inhalt außerhalb der Box sichtbar ist, dieser Inhalt den Fluss der Seite nicht beeinflusst. Zum Beispiel

Im Allgemeinen sollten Sie Boxen mit Webtexten ohnehin keine statischen Höhen zuweisen, daher sollte es nicht vorkommen.

hidden

Das Gegenteil des Standardwerts visible ist hidden. Dies blendet buchstäblich jeden Inhalt aus, der über die Box hinausgeht.

Dies ist besonders nützlich bei dynamischen Inhalten und der Möglichkeit, dass ein Überlauf ernsthafte Layoutprobleme verursacht. Beachten Sie jedoch, dass Inhalte, die auf diese Weise ausgeblendet werden, absolut unzugänglich sind (außer durch Betrachten des Quellcodes). Wenn also ein Benutzer seine Standard-Schriftgröße größer eingestellt hat, als Sie erwarten, könnten Sie Text aus einer Box herausdrängen und ihn ihm komplett vorenthalten.

scroll

Wenn Sie den Überlaufwert einer Box auf scroll setzen, werden Inhalte, die außerhalb der Box gerendert werden, ausgeblendet, aber es werden Scrollleisten angeboten, um das Innere der Box zu scrollen und die Inhalte anzuzeigen.

Besonders hervorzuheben ist bei diesem Wert, dass Sie IMMER SOWOH horizontal als auch vertikale Scrollleisten erhalten, egal was passiert, selbst wenn der Inhalt nur eines davon benötigt.

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

Hinweis: In OS X Lion verhält sich scroll, wenn Scrollleisten nur bei Bedarf angezeigt werden, eher wie auto, da nur benötigte Scrollleisten angezeigt werden.

auto

Auto-Überlauf ist dem Scroll-Wert sehr ähnlich, nur dass er das Problem der Scrollleisten löst, wenn Sie sie nicht benötigen. Die Scrollleisten werden nur angezeigt, wenn Inhalte tatsächlich aus dem Element herausragen.

overflow-x und overflow-y

Es ist auch möglich, den Überlauf von Inhalten horizontal oder vertikal mit den Eigenschaften overflow-x und overflow-y zu manipulieren. Zum Beispiel kann im folgenden Demo der horizontale Überlauf durchgescrollt werden, während der Text, der über die Höhe der Box hinausgeht, ausgeblendet wird.

.box {
  overflow-y: hidden;
  overflow-x: scroll;
}

Float-Bereinigung

Eine der beliebtesten Verwendungen der Überlaufeigenschaft ist seltsamerweise die Float-Bereinigung. Das Setzen von overflow bereinigt den Float nicht *am* Element, es *selbst-bereinigt* sich. Das bedeutet, dass das Element mit overflow (jeder Wert außer visible) so groß wird, wie es benötigt, um darin enthaltene, gefloatete Kindelemente zu umfassen (anstatt zu kollabieren), vorausgesetzt, die Höhe ist nicht deklariert. So wie hier

Eine bessere Float-Bereinigungstechnik ist der clearfix, da er nicht erfordert, dass Sie die overflow-Eigenschaft so ändern, wie Sie es nicht benötigen.

Erzeugung eines Blockformatierungskontexts

Es ist interessant festzustellen, dass overflow auch einen neuen Blockformatierungskontext erzeugt, was nützlich ist, wenn wir ein Blockelement neben einem gefloateten Element ausrichten wollen. Im folgenden Beispiel zeigen wir, wie sich eine Reihe von Absätzen standardmäßig mit einem gefloateten Bild interagieren, und verwenden dann overflow: hidden, um den Text in seiner eigenen Box auszurichten.

Dies stammt aus einem großartigen Beitrag von Nicole Sullivan, der später das media object inspirierte.

Können Scrollleisten mit CSS gestaltet werden?

Früher konnte man Scrollleisten in IE (v5.5?) gestalten, aber nicht mehr. Sie können sie jetzt wieder in WebKit-Browsern gestalten. Wenn Sie browserübergreifende benutzerdefinierte Scrollleisten benötigen, schauen Sie auf JavaScript.

Wenn ein Element Scrollleisten angehängt werden müssen, um den Überlaufwert zu erfüllen, fügt Firefox sie außerhalb des Elements ein und behält die sichtbare Breite/Höhe bei, wie deklariert. IE fügt die Scrollleisten innen ein und behält die Gesamtbreite/Höhe bei, wie deklariert.

Demo

Demos für diesen Artikel stammen von dieser Beispielsseite.

Browser-Unterstützung

Weitere Informationen

• Verständnis des bescheidenen Clearfix
• Überlauf: Ein geheimer Vorteil
• Überlauf auf MDN
• Überlauf auf W3C
• Finden/Beheben von unbeabsichtigtem Body-Überlauf

Verwandt