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. Überlauf ist besonders wichtig bei der Entwicklung für Telefonanwendungen und mehrere Bildschirmgrößen.
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 ohne Umbruch 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;
}
Überlaufeigenschaften 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, die mehr Platz vom übergeordneten Element benötigen. Sie können sich das als das vorstellen, was Sie durch das Fenster sehen. Die Verwaltung des Überlaufs trägt dazu bei, wie die Fenster diese Inhalte umrahmen.
Scrollen auf der vertikalen und horizontalen Achse
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 der Scroll-Richtung
Mit den Eigenschaften overflow-inline
und overflow-block
wird der Überlauf basierend auf der Dokumentrichtung und dem Schreibmodus festgelegt.
Die Kurzschreibweise für overflow
Mit der Abkürzung overflow
werden die Stile overflow-x
und overflow-y
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 das Attribut wird
overflow: visible
der Standardwert für das Web verwendet. 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 aktuell nicht überlaufen, werden Bildlaufleisten angezeigt. Dies ist eine gute Möglichkeit, zukünftige Layoutänderungen zu reduzieren, wenn ein Container in Zukunft beispielsweise aufgrund einer Größenänderung scrollbar sein kann, und die Nutzer visuell auf scrollbare Bereiche vorzubereiten.overflow: clip
- Wie bei
overflow: hidden
wird der Inhalt mitoverflow: clip
am Innenrand des Elements abgeschnitten. Der Unterschied zwischen „clip
“ und „hidden
“ besteht darin, dass das Keyword „clip
“ außerdem jegliches Scrollen verhindert, auch programmatisches 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
-Verhaltensweisen führen zu einer Bildlaufleiste. Es gibt jedoch einige bestimmte Scroll-Verhaltensweisen 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.
Damit ein Bildlauffeld den Fokus akzeptieren kann, fügen Sie tabindex="0"
, einen Namen mit dem Attribut aria-labelledby
und ein entsprechendes 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
Sie werden möglicherweise feststellen, dass einige Scroller ein Pull-to-Refresh-Verhalten und andere besondere Verhaltensweisen aufweisen, insbesondere bei der Entwicklung für mobile und Hybridanwendungen. 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 erfahren Sie, wie Sie einen Root-Scroller im Vergleich zu einem verschachtelten impliziten Scroller sehen.
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 prefers-reduced-motion verwenden, um das Scrollverhalten basierend auf den Nutzereinstellungen anzugeben.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
overscroll-behavior
Wenn Sie das Ende eines modalen Overlays erreicht haben, weitergescrollt haben und die Seite hinter dem Overlay verschoben wurde, ist dies die Verkettung des Scrollens, also die Dynamik des übergeordneten Scroll-Containers. Mit der Eigenschaft overscroll-behavior
können Sie verhindern, dass das Überlauf-Scrollen in einen übergeordneten Container eindringt (dies wird als Scroll-Kettenreaktion bezeichnet).
Wissenstest
Testen Sie Ihr Wissen über Overflow
Sind Text- und Elementüberlauf dasselbe?
Für die Eigenschaft overflow
sind zwei Keywords zulässig. Für welche Achse befindet sich das erste Keyword?
Welchen Bereich im Box-Modell belegen Bildlaufleisten, wenn sie angezeigt und inline sind?
Welche Eigenschaft verwenden Sie, um bei verschachtelten impliziten Scrollern zusätzliche Dynamik zu vermeiden?
scroll-behavior
scroll-padding
overscroll-behavior
overscroll-effect
scroll-hint