CSS Overflow

Die CSS overflow-Moduleigenschaften ermöglichen es Ihnen, scrollbaren Überlauf in visuellen Medien zu steuern.

Überlauf tritt auf, wenn der Inhalt in einem Elementrahmen über eine oder mehrere Kanten des Rahmens hinausgeht. Scrollbarer Überlauf ist der Inhalt, der außerhalb des Elementrahmens erscheint und für den Sie möglicherweise eine Scrollmethode hinzufügen möchten. CSS-Überlaufeigenschaften erlauben es Ihnen, zu steuern, was passiert, wenn Inhalt aus einem Elementrahmen hinausläuft.

Malereffekte, die den Inhalt überfließen, aber nicht im CSS-Boxmodell teilnehmen, beeinflussen das Layout nicht. Diese Art von Überlauf ist auch bekannt als Ink Overflow. Beispiele für Ink Overflows umfassen Box-Schatten, Rahmenbilder, Textdekorationen, überhängende Glyphen und Umrisse. Ink Overflows erweitern nicht den Bereich des scrollbaren Überlaufs.

Überlauf in Aktion

Probieren Sie das folgende Beispiel aus, um die Auswirkungen verschiedener Werte der overflow-Eigenschaft auf den Überlauf des Inhalts und die Bildlaufleisten in dem benachbarten festgelegten Rahmen zu sehen.

Das Beispiel enthält Optionen zum Ändern der Werte für die Eigenschaften overflow-clip-margin und width sowie für das programmgesteuerte Scrollen des Inhalts, falls die Eigenschaft Overflow 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, um die verschiedenen Einstellungen der Schieberegler für ScrollLeft und ScrollTop zu überprüfen.

Ein Link ist im Inhaltsrahmen oben enthalten, um die Auswirkungen von Tastaturfokus auf Überlauf- und Scrollverhalten zu demonstrieren. Versuchen Sie, mit der Tabulatortaste zum Link zu navigieren oder den Inhalt programmgesteuert zu scrollen: Der Inhalt wird nur dann gescrollt, wenn der enumerierte <overflow>-Wert einen Scroll-Container erstellt.

Referenz

Eigenschaften

Hinweis: Das CSS Overflow Module Level 4 führt die Eigenschaften block-ellipsis, continue, max-lines, overflow-clip-margin-block, overflow-clip-margin-block-end, overflow-clip-margin-block-start, overflow-clip-margin-bottom, overflow-clip-margin-inline, overflow-clip-margin-inline-end, overflow-clip-margin-inline-start, overflow-clip-margin-left, overflow-clip-margin-right und overflow-clip-margin-top ein. Diese wurden jedoch noch nicht implementiert.

Datentypen

Leitfäden

Lernen: Überlaufender Inhalt

Lernen Sie, was Überlauf ist und wie man damit umgeht.

Erstellen einer benannten Scroll-Fortschritts-Timeline-Animation

Die CSS-Scroll-Timeline-Eigenschaften scroll-timeline-name und scroll-timeline-axis, sowie die scroll-timeline-Kurzform, erstellen Animationen, die an den Scroll-Offset eines Scroll-Containers gebunden sind.

Verwandte Konzepte

Spezifikationen

Specification
CSS Overflow Module Level 3
CSS Overflow Module Level 4

Siehe auch