Überlauf

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 mit overflow: 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

Ressourcen

Overflow und Datenverlust in CSS aus dem Smashing Magazine