CSS overflow

Die CSS overflow Modul-Eigenschaften ermöglichen es Ihnen, scrollbaren Überlauf in visuellen Medien zu handhaben.

Ein Überlauf tritt auf, wenn der Inhalt in einem Elementrahmen über eine oder mehrere Kanten dieses Rahmens hinausreicht. Scrollbarer Überlauf ist der Inhalt, der außerhalb des Elementrahmens erscheint und für den Sie möglicherweise einen Scrollmechanismus hinzufügen möchten. CSS overflow-Eigenschaften ermöglichen es Ihnen, zu kontrollieren, was passiert, wenn Inhalt einen Elementrahmen überläuft.

Zeicheneffekte, die den Inhalt überlaufen, aber nicht am CSS-Box-Modell teilnehmen, beeinflussen das Layout nicht. Diese Art von Überlauf wird auch als Ink-Overflow bezeichnet. Beispiele für Ink-Overflow sind Box-Schatten, Rahmenbilder, Textdekoration, überhängende Glyphen und Umrisse. Ink-Overflows erweitern nicht den scrollbaren Überlaufbereich.

Overflow in Aktion

Probieren Sie das folgende Beispiel aus, um die Auswirkungen verschiedener overflow-Eigenschaftswerte auf den Inhaltsüberlauf und die Scrollbalken im benachbarten, festen Rahmen zu sehen.

Das Beispiel enthält Optionen zum Ändern der Werte für die overflow-clip-margin und width-Eigenschaften, sowie um den Inhalt programmatisch zu scrollen, falls die overflow-Eigenschaft einen Scroll-Container erstellt. Wählen Sie overflow: clip und sehen Sie sich die Auswirkung verschiedener overflow-clip-margin-Werte an. Wählen Sie overflow: hidden oder overflow: scroll, um die verschiedenen ScrollLeft und ScrollTop Schieberegler-Einstellungen zu überprüfen.

Ein Link ist im Inhaltselement oben enthalten, um die Auswirkungen von Tastaturfokus auf Überlauf- und Scroll-Verhalten zu demonstrieren. Versuchen Sie, zum Link zu taben oder den Inhalt programmatisch zu scrollen: Der Inhalt scrollt nur, wenn der aufgelistete <overflow>-Wert einen Scroll-Container erstellt.

Referenz

CSS Eigenschaften

Hinweis: Das CSS overflow Modul Level 4 führt die Eigenschaften block-ellipsis, continue, line-clamp und max-lines ein. Diese wurden noch nicht implementiert.

Datentypen

Leitfäden

Erlernen: Überlaufenden Inhalt handhaben

Erfahren Sie, was Überlauf ist und wie man ihn handhabt.

Erstellen einer benannten Scroll-Fortschritts-Timeline-Animation

Die CSS-Scroll-Timeline-Eigenschaften scroll-timeline-name und scroll-timeline-axis, zusammen mit der scroll-timeline Kurzform erstellen Animationen, die an den Scroll-Versatz eines Scroll-Containers gebunden sind.

Verwandte Konzepte

Spezifikationen

Specification
Unknown specification
Unknown specification

Siehe auch