CSS Overflow

Die CSS-Eigenschaft <overflow> steuert, was passiert, wenn der Inhalt eines Elements die angegebene Breite oder Höhe überschreitet. Damit können wir einstellen, ob der überlaufende Inhalt verborgen wird, eine Scrollleiste erscheint oder sich automatisch anpasst.

Grundlagen von Overflow

Die Eigenschaft <overflow> kann vier Hauptwerte annehmen: visible (Standard, Inhalt läuft über), hidden (überlaufender Inhalt wird verborgen), scroll (es erscheint immer eine Scrollleiste) und auto (eine Scrollleiste erscheint nur bei Bedarf).

Im folgenden Beispiel würde der Inhalt aus der Box herausragen, aber die Einstellung <overflow: hidden;> blendet das Überflüssige aus:

Vergleich der Overflow-Werte

Hidden, scroll und auto bieten unterschiedliche Lösungen zur Handhabung von Inhalten. Scroll zeigt immer eine Scrollleiste, während auto nur dann eine einblendet, wenn sie benötigt wird.

Achsen-spezifische Einstellungen

Mit den Eigenschaften <overflow-x> und <overflow-y> kann das horizontale und vertikale Überlaufen separat gesteuert werden. Dies ist nützlich, wenn man z. B. nur horizontales Scrollen erlauben möchte.

Overflow bei Inline-Elementen

Overflow ist nicht nur bei Blockelementen relevant: Auch bei inline-block-Elementen kann das Überlaufen gesteuert werden.

Overflow und Flexbox

Bei Flexbox-Layouts sorgt Overflow dafür, dass zu große Elemente scrollbar bleiben.

Text-overflow: ellipsis

Mit der Einstellung text-overflow: ellipsis wird zu langer Text mit drei Punkten (...) abgeschnitten, wenn er nicht in die Box passt.

Tipps zur Verwendung von Overflow

Die richtige Verwendung von Overflow hilft, unerwartete Layoutprobleme zu vermeiden und die Übersichtlichkeit des Inhalts zu erhöhen:

• Überprüfe immer, wie sich der Inhalt auf verschiedenen Bildschirmgrößen verhält.
• Verwende <overflow: auto;>, um die Benutzerfreundlichkeit zu verbessern und unnötige Scrollleisten zu vermeiden.
• Mit achsenspezifischen Einstellungen kannst du die Scrollrichtung genau steuern.