The CSS Podcast – 034: Overflow
Wenn Inhalte über das übergeordnete Element hinausgehen, haben Sie viele Möglichkeiten, wie Sie damit umgehen können. Sie können scrollen, um zusätzlichen Platz hinzuzufügen, die überstehenden Ränder zu kürzen, den Ausschnitt mit einem Auslassungszeichen zu kennzeichnen und vieles mehr. Overflow ist besonders wichtig, wenn Sie Apps für Smartphones und verschiedene Bildschirmgrößen entwickeln.
In CSS gibt es zwei verschiedene Zuschneideoptionen: text-overflow
eignet sich für einzelne Textzeilen und die overflow
-Eigenschaften helfen, den Überlauf im Box-Modell zu steuern.
Überlauf einer einzelnen Zeile mit text-overflow
Verwenden Sie die Property text-overflow
für alle Elemente, die Textknoten enthalten, z. B. einen Absatz(<p>
). Hier wird festgelegt, wie der Text angezeigt wird, wenn er nicht in den verfügbaren Bereich des Elements passt. Der gesamte sichtbare HTML-Text auf einer Seite befindet sich in Textknoten. Für die Verwendung von text-overflow
ist eine einzelne Zeile mit nicht umgebrochenem Text erforderlich. Daher müssen Sie overflow
auf hidden
festlegen und einen white-space
-Wert verwenden, der das Umbrechen verhindert.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Überlauf-Properties verwenden
Mit den Überlaufeigenschaften für ein Element wird festgelegt, was passiert, wenn seine untergeordneten Elemente mehr Platz benötigen, als verfügbar ist. Das kann beabsichtigt sein, z. B. bei einer interaktiven Karte wie Google Maps, bei der ein Nutzer ein großes Bild schwenken kann, das auf eine bestimmte Größe zugeschnitten ist. Es kann auch unbeabsichtigt sein, z. B. in einer Chat-Anwendung, in der der Nutzer eine lange Nachricht eingibt, die nicht in die Textblase passt.
Sie können sich den Überlauf in zwei Teilen vorstellen. Das übergeordnete Element hat einen festen Bereich, der sich nicht ändert. Sie können sich das als Fenster vorstellen. Die untergeordneten Elemente sind Inhalte, für die mehr Platz vom übergeordneten Element benötigt wird. Sie können sich das als das vorstellen, was Sie durch das Fenster sehen. Mit der Verwaltung des Überlaufs können Sie festlegen, wie die Inhalte im Fenster dargestellt werden.
Vertikales und horizontales Scrollen
Mit der Eigenschaft overflow-y
wird der physische Überlauf entlang der vertikalen Achse des Geräte-Viewports gesteuert, also das Scrollen nach oben und unten.
Mit der overflow-x
-Eigenschaft wird der Überlauf entlang der horizontalen Achse des Geräte-Viewports gesteuert, also das Scrollen nach links und rechts.
Logische Eigenschaften für die Scrollrichtung
Die Eigenschaften overflow-inline
und overflow-block
legen den Überlauf basierend auf der Dokumentausrichtung und dem Schreibmodus fest.
Die Kurzschreibweise für overflow
Mit dem Kurzzeichen overflow
werden sowohl der overflow-x
- als auch der overflow-y
-Stil in einer Zeile festgelegt:
overflow: hidden scroll;
Wenn zwei Keywords angegeben werden, gilt das erste für overflow-x
und das zweite für overflow-y
. Andernfalls wird für overflow-x
und overflow-y
derselbe Wert verwendet.
Werte
Sehen wir uns die Werte und Keywords an, die für die overflow
-Properties verfügbar sind.
overflow: visible
(Standard)- Ohne Festlegen der Property ist
overflow: visible
der Standardwert für das Web. So wird sichergestellt, dass Inhalte niemals versehentlich ausgeblendet werden, und die Grundprinzipien „Inhalte niemals ausblenden“ oder „Sichere Layouts mit präzisen Layouts“ werden eingehalten. overflow: hidden
- Bei
overflow: hidden
wird der Inhalt in der angegebenen Richtung zugeschnitten und es werden keine Scrollleisten angezeigt. overflow: scroll
Mit overflow: scroll
können Nutzer mithilfe von Bildlaufleisten durch Inhalte scrollen. Auch wenn die Inhalte derzeit nicht überlaufen, sind Bildlaufleisten vorhanden. Dies ist eine gute Möglichkeit, zukünftige Layoutänderungen zu reduzieren, wenn ein Container beispielsweise aufgrund einer Größenänderung in Zukunft scrollbar sein kann, und die Nutzer visuell auf scrollbare Bereiche vorzubereiten.overflow: clip
- Wie bei
overflow: hidden
wird der Inhalt mitoverflow: clip
auf den Ränderbereich des Elements zugeschnitten. Der Unterschied zwischenclip
undhidden
besteht darin, dass mit dem Keywordclip
auch das Scrollen verboten wird, einschließlich programmatischem Scrollen. overflow: auto
- Und schließlich der am häufigsten verwendete Wert:
overflow: auto
. Dabei werden die Einstellungen des Nutzers berücksichtigt und Scrollbalken werden bei Bedarf angezeigt, standardmäßig aber ausgeblendet. Das Scrollen wird dem Nutzer und dem Browser überlassen.
Scrollen und Überlauf
Viele dieser overflow
-Verhalten führen zu einer Bildlaufleiste. Es gibt jedoch einige bestimmte Scroll-Verhalten und -Eigenschaften, mit denen Sie das Scrollen im Überlaufcontainer steuern können.
Scrollen und Barrierefreiheit
Der scrollbare Bereich muss fokussierbar sein, damit Nutzer mit Tastatur den Tabulator auf das Feld drücken und dann mit den Pfeiltasten scrollen können.
Wenn ein scrollbares Feld den Fokus erhalten soll, fügen Sie tabindex="0"
, einen Namen mit dem Attribut aria-labelledby
und ein geeignetes role
-Attribut hinzu. Beispiel:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
Mit CSS kann dann angegeben werden, dass das Feld den Fokus hat. Mit der Eigenschaft outline
wird visuell angezeigt, dass es jetzt scrollbar ist.
In Using CSS to Enforce Accessibility zeigt Adrian Roselli, wie Sie mit CSS Rückschritte bei der Barrierefreiheit verhindern können. So können Sie beispielsweise das Scrollen nur aktivieren und den Fokusindikator hinzufügen, wenn die richtigen Attribute verwendet werden. Mit den folgenden Regeln ist das Feld nur scrollbar, wenn es die Attribute tabindex
, aria-labelledby
und role
hat.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Positionierung der Bildlaufleiste im Box-Modell
Bildlaufleisten belegen Platz im Ränderbereich und können um den Platz konkurrieren, wenn inline
und nicht overlaid
verwendet wird. Im Modul zum Boxmodell erfahren Sie mehr über diese potenzielle Ursache für Layoutänderungen.
Root-Scroller im Vergleich zu impliziten Scrollern
Einige Scroller haben möglicherweise ein Pull-to-Refresh-Verhalten und andere spezielle Verhaltensweisen, insbesondere bei der Entwicklung für mobile und hybride Anwendungen. Dieses Scrollverhalten wird vom übergeordneten Scroller ausgeführt. Auf einer Seite gibt es immer nur einen einzigen Stamm-Scroller. Standardmäßig ist das Element documentElement der Basis-Scroller der Seite. Wenn Sie jedoch das Element ändern, das der Basis-Scroller ist, können die speziellen Verhaltensweisen auf andere Scroller als documentElement angewendet werden. Wir nennen diesen neuen Scroller den impliziten Basis-Scroller.
Wenn Sie einen Root-Scroller erstellen möchten, können Sie die sogenannte Scroller-Beförderung verwenden. Positionieren Sie dazu einen Container als fixiert, sodass er den gesamten Darstellungsbereich abdeckt und im Z-Index über einem Scroller liegt. Hier können Sie einen Root-Scroller mit einem verschachtelten impliziten Scroller vergleichen.
scroll-behavior
Mit scroll-behavior
können Sie das browsergesteuerte Scrollen zu Elementen aktivieren. So können Sie festlegen, wie die Navigation auf der Seite wie .scrollTo()
oder Links behandelt wird.
Das ist besonders nützlich, wenn Sie es mit prefers-reduced-motion kombinieren, um das Scrollverhalten basierend auf den Nutzereinstellungen anzugeben.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
Wenn Sie schon einmal das Ende eines modalen Overlays erreicht, weitergescrollt und festgestellt haben, dass sich die Seite hinter dem Overlay bewegt hat, dann ist das die Scroll-Kette oder das Aufsteigen zum übergeordneten Scroll-Container. Mit der Eigenschaft overscroll-behavior
können Sie verhindern, dass das Überlauf-Scrollen in einen übergeordneten Container eindringt (dies wird als Scroll-Kettenreaktion bezeichnet).
Wissen testen
Testen Sie Ihr Wissen über Overflow
Sind Text- und Elementüberlauf dasselbe?
Für das Attribut overflow
sind zwei Keywords zulässig. Für welche Achse ist das erste Keyword bestimmt?
Welchen Bereich im Box-Modell belegen Bildlaufleisten, wenn sie angezeigt und inline sind?
Welches Attribut würden Sie verwenden, um den zusätzlichen Schwung beim Scrollen in einem verschachtelten impliziten Scroller zu speichern?
scroll-padding
scroll-hint
scroll-behavior
overscroll-behavior
overscroll-effect