Was overflow macht
Ist Inhalt größer als seine Box (eine feste Höhe, ein langes Wort, eine breite Tabelle), läuft er über. Die Eigenschaft overflow entscheidet, was mit dem Überschuss passiert:
| Wert | Was du siehst | Scroll-Container |
|---|---|---|
visible (Standard) | Inhalt quillt aus der Box und überlappt, was folgt | Nein |
hidden | An der Padding-Kante abgeschnitten, keine Scrollleisten (per Skript trotzdem scrollbar) | Ja |
clip | Abgeschnitten, und gar kein Scrollen, auch nicht per Skript | Nein |
scroll | Zeigt immer Scrollleisten, auch wenn der Inhalt passt | Ja |
auto | Scrollleisten nur, wenn der Inhalt nicht passt | Ja |
Unter macOS und auf Handys liegen Scrollleisten über dem Inhalt und blenden sich aus, also sehen scroll und auto womöglich gleich aus, bis du scrollst.
Eine scrollbare Box bauen
Eine Box läuft nur über, wenn etwas ihre Größe begrenzt. Eine height oder max-height plus overflow-y: auto macht aus einer langen Liste ein scrollendes Panel:
max-height ist hier besser als height: Eine kurze Liste bleibt kurz, und nur eine lange Liste scrollt. Ein scrollbarer Bereich ohne fokussierbaren Inhalt sollte tabindex="0" bekommen, damit ihn auch Tastaturnutzer scrollen können.
overflow-x und overflow-y
Die beiden Achsen lassen sich getrennt setzen. Der häufigste Einsatz ist eine breite Tabelle, die in ihrem Container seitwärts scrollt, statt die ganze Seite zu verbreitern:
Eine Regel solltest du dir merken: Ist eine Achse hidden, scroll oder auto, wird ein visible auf der anderen Achse zu auto. Deshalb kann overflow-x: hidden allein eine unerwartete vertikale Scrollleiste erzeugen. overflow-x: clip hat diesen Effekt nicht:
.a { overflow-x: hidden; } /* overflow-y computes to auto */
.b { overflow-x: clip; } /* overflow-y stays visible */
Text mit Auslassungspunkten kürzen
text-overflow: ellipsis ersetzt das abgeschnittene Ende einer Zeile durch „…“. Dafür braucht es drei Dinge zusammen: eine begrenzte Breite, Text, der nicht umbrechen kann, und verborgenen Überlauf:
Der Zeilen-Clamp mit dem Präfix -webkit- funktioniert in Chrome, Firefox und Safari. Screenreader lesen trotzdem den ganzen Text vor, die abgeschnittenen Wörter gehen für sie also nicht verloren.
Nebenwirkungen von overflow
Setzt du overflow auf etwas anderes als visible oder clip, ändert sich mehr als nur das Abschneiden:
- Es schließt Floats und Margins von Kindern ein. Das Element bildet einen neuen Block Formatting Context und wächst deshalb um gefloatete Kinder herum.
display: flow-rootmacht dasselbe, ohne etwas abzuschneiden. - Es macht
position: stickydarunter kaputt. Ein sticky-Kind klebt am nächsten Scroll-Container; scrollt dieser Container nicht, klebt nichts. - Es schneidet absolut positionierte Kinder ab (wenn das überlaufende Element auch ihr umgebender Block ist), auch Dropdowns und Tooltips, und es schneidet auch die Schatten von Kindern ab.
Die Scrollleiste ausblenden
Mit scrollbar-width: none bleibt eine Box scrollbar, während ihre Scrollleiste verborgen ist. Setz das sparsam ein: Ohne Scrollleiste merken viele Leser nicht, dass es mehr Inhalt gibt. scrollbar-gutter: stable macht das Gegenteil: Es reserviert den Platz der Scrollleiste, damit sich der Inhalt nicht verschiebt, wenn eine Scrollleiste erscheint.
Häufige Fehler
- Überlauf ohne Größenbegrenzung erwarten. Eine Box ohne
heightodermax-heightwächst, statt überzulaufen. overflow: hiddenanbody, um horizontales Scrollen zu „reparieren“. Such stattdessen das Element, das zu breit ist (oft eine festewidth, eine lange URL oder100vwmit Scrollleiste).- Ellipsis ohne
white-space: nowrap. Der Text bricht um, also läuft nichts horizontal über, und es erscheinen keine Auslassungspunkte. overflow-x: hiddenerzeugt eine vertikale Scrollleiste. Nimmclip.- Ein Dropdown, das von seiner Karte abgeschnitten wird. Das
overflow: hiddender Karte schneidet es ab; verlege die overflow-Regel oder rendere das Dropdown außerhalb.
Häufig gestellte Fragen
Was macht overflow: hidden?
Es schneidet Inhalt ab, der nicht in die Padding-Box des Elements passt, ohne Scrollleisten. Zum verborgenen Teil kann trotzdem per Skript oder durch Fokussieren eines Elements darin gescrollt werden.
Was ist der Unterschied zwischen overflow auto und scroll?
scroll reserviert immer Scrollleisten, auch wenn der Inhalt hineinpasst. auto zeigt eine Scrollleiste nur, wenn der Inhalt größer als die Box ist, und das willst du meistens.
Wie mache ich ein div scrollbar?
Begrenze seine Größe und erlaube Scrollen: max-height: 300px; overflow-y: auto;. Ohne Begrenzung durch height oder max-height wächst das div mit seinem Inhalt und läuft nie über.
Warum erzeugt overflow-x: hidden auch eine vertikale Scrollleiste?
Ist eine Achse hidden, scroll oder auto, wird ein visible auf der anderen Achse als auto berechnet. Nimm stattdessen overflow-x: clip, das keinen Scroll-Container erzeugt und die andere Achse sichtbar lässt.
Wie füge ich überlaufendem Text Auslassungspunkte (...) hinzu?
Für eine Zeile: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; an einem Element mit begrenzter Breite. Für mehrere Zeilen nimmst du display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;.
