CSS overflow

Die Eigenschaften des CSS overflow Moduls ermöglichen es Ihnen, scrollbare Überläufe in visuellen Medien zu handhaben.

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

Mal-Effekte, die den Inhalt überfließen, aber nicht am CSS-Box-Modell teilnehmen, beeinflussen das Layout nicht. Diese Art des Überlaufens wird auch als Tintenüberlauf bezeichnet. Beispiele für Tintenüberläufe sind Box-Schattierungen, Rahmenbilder, Textdekoration, überhängende Glyphen und Umrandungen. Tintenüberläufe erweitern nicht den scrollbaren Überlaufbereich.

Überlauf in Aktion

Verwenden Sie das folgende interaktive Beispiel, um die Auswirkungen verschiedener overflow Eigenschaftswerte auf den Inhaltsüberlauf und die Scrollbalken im angrenzenden festgelegten Rahmen zu sehen.

Das Beispiel enthält auch Optionen zum Ändern der Werte der Eigenschaften overflow-clip-margin und width sowie zum programmgesteuerten Scrollen des Inhalts, falls die overflow-Eigenschaft einen scroll container erstellt. Wählen Sie overflow: clip und sehen Sie sich die Auswirkungen verschiedener overflow-clip-margin Werte an. Wählen Sie overflow: hidden oder overflow: scroll aus, um die verschiedenen ScrollLeft und ScrollTop Reglereinstellungen zu prüfen.

Ein Link ist im Inhaltsrahmen oben enthalten, um die Auswirkungen von Tastaturfokus auf Überlauf- und Scroll-Verhalten zu demonstrieren. Versuchen Sie, zum Link zu tabben oder den Inhalt programmgesteuert zu scrollen: Der Inhalt wird nur dann scrollen, wenn der aufgeführte <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

Überlaufender Inhalt

CSS-Baustein: Lernen Sie, was Überlauf ist und wie Sie ihn verwalten können.

Erstellung einer benannten Scroll-Fortschritts-Zeitleistenanimation

Die CSS Scroll-Zeitleiste scroll-timeline-name und scroll-timeline-axis Eigenschaften sowie die 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