CSS Text Overflow: Ellipsis, Line Clamp und Worttrennung
Labor für CSS-Overflow und Textkürzung
CSS Text Overflow: Ellipsis, Line Clamp, Word Break | We.Inc
Ändere die Breite einer Box mit einer langen URL und einem deutschen Kompositum und teste dann overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap und hyphens live, mit Tailwind-Klassen.
Langer Inhalt läuft aus seiner Box heraus, wenn die Box zu klein ist. overflow entscheidet, was mit dem Überschuss passiert: visible, hidden, clip, scroll oder auto. Für eine einzelne Zeile, die mit Punkten endet, kombinierst du white-space: nowrap, overflow: hidden und text-overflow: ellipsis. Für mehrere Zeilen nutzt du -webkit-line-clamp. Um untrennbare Wörter aufzuteilen, nimmst du overflow-wrap: anywhere.
Zieh am Breitenregler, und die Beispielbox schrumpft um eine echte Webadresse, das Wort Donaudampfschifffahrtsgesellschaft und einen normalen Satz. Jede Option für Overflow, Umbruch und Clamping ist ein Button, das Ergebnis erscheint sofort, und das passende CSS steht darunter.
Wähle, welcher Beispieltext geladen wird: eine URL, ein langes zusammengesetztes Wort oder ein Absatz.
Zieh den Breitenregler, bis der Text nicht mehr passt.
Probiere nacheinander overflow-Werte, Ellipsis, einen Line Clamp und die Optionen zur Worttrennung aus.
Kopiere das CSS, das zum gewünschten Ergebnis passt.
Ellipsis braucht alle drei: nowrap, einen overflow-Wert außer visible und eine Breitenbegrenzung. Fehlt einer davon, erscheinen keine Punkte.
In einer Flex-Zeile braucht ein gekürztes Kind zusätzlich min-width: 0, weil Flex-Items standardmäßig nicht kleiner als ihr Inhalt werden.
Hinterlege den vollständigen Text in einem title-Attribut oder zeige ihn bei Fokus an, denn Kürzung versteckt Wörter vor Menschen, die nicht hovern können.
hyphens: auto trennt nur, wenn das Element oder ein Elternelement ein lang-Attribut hat, für das der Browser ein Wörterbuch besitzt.
Häufige Fragen
Warum funktioniert text-overflow: ellipsis nicht?
Meist fehlt einer seiner Partner. Das Element muss ein Block- oder Inline-Block-Element mit begrenzter Breite sein, overflow auf hidden oder clip gesetzt haben und den Text mit white-space: nowrap in einer Zeile halten. In einem Flex- oder Grid-Item ergänzt du außerdem min-width: 0, damit das Item schrumpfen darf.
Wird line-clamp ohne das Präfix -webkit- unterstützt?
Die Form mit Präfix, also -webkit-line-clamp zusammen mit display: -webkit-box und -webkit-box-orient: vertical, funktioniert in allen aktuellen großen Browsern und ist das, was Tailwind ausgibt. Die Eigenschaft line-clamp ohne Präfix aus CSS Overflow Level 4 wird noch eingeführt, prüfe also caniuse, bevor du dich allein darauf verlässt.
Was ist der Unterschied zwischen word-break und overflow-wrap?
overflow-wrap trennt ein Wort nur, wenn es sonst überlaufen würde, normale Wörter umbrechen also ganz normal. word-break: break-all erlaubt dem Browser, überall zwischen zwei beliebigen Buchstaben umzubrechen, was einen zerfransten, schwer lesbaren Text ergibt. word-break: keep-all ist für chinesischen, japanischen und koreanischen Text gedacht, bei dem du keine Umbrüche innerhalb von Wörtern willst.
Was macht overflow: clip, was hidden nicht macht?
Beide schneiden den Überschuss ab. hidden erzeugt trotzdem einen Scroll-Container, Skripte können ihn also scrollen, und er beeinflusst position: sticky im Inneren. clip verbietet jedes Scrollen, und mit overflow-clip-margin kannst du Inhalt ein paar Pixel über den Rand hinausragen lassen, bevor abgeschnitten wird.
Wie kürze ich Text in einer Tabellenzelle?
Setze table-layout: fixed auf die Tabelle und eine Breite auf die Spalten und wende dann das übliche Trio aus nowrap, hidden und ellipsis auf die Zelle an. Ohne festes Layout wächst die Spalte einfach mit dem Text mit. Eine andere Möglichkeit ist max-width: 0 mit width: 100% auf der Zelle.
Die fünf overflow-Werte
visible ist der Standard und lässt Inhalt außerhalb der Box zeichnen, ohne das Layout drumherum zu beeinflussen. hidden und clip schneiden ihn an der Padding-Kante ab. scroll zeigt immer Scrollleisten, selbst wenn nichts überläuft, und auto zeigt sie nur bei Bedarf, was fast immer die bessere Wahl ist.
overflow ist die Kurzform für overflow-x und overflow-y. Eine Achse auf visible und die andere auf hidden zu setzen, funktioniert nicht wie geschrieben: Der Browser berechnet visible in dieser Kombination als auto, sodass eine unerwartete Scrollleiste auftauchen kann. clip ist die Ausnahme und lässt sich mit visible kombinieren.
Wörter umbrechen, die nicht passen
overflow-wrap: break-word trennt lange Wörter bei Bedarf, lässt die Box aber nicht kleiner als das längste Wort werden, sodass sie in Flex-Items und Tabellen trotzdem überlaufen kann. overflow-wrap: anywhere senkt zusätzlich diese Mindestgröße, deshalb behebt es lange URLs in schmalen Seitenleisten.
hyphens: auto setzt in Sprachen, die der Browser unterstützt, einen Trennstrich an einer korrekten Silbengrenze und macht schmalen oder im Blocksatz gesetzten deutschen und niederländischen Text deutlich besser lesbar. Manche Safari-Versionen verstehen nur -webkit-hyphens, schreib also beides. Nutze hyphens: manual und den weichen Trennstrich ­, wenn du die Trennstellen selbst bestimmen willst.
Kürzung und Barrierefreiheit
Abgeschnittener Text steht weiterhin in der Seite, Screenreader lesen also alles vor, und das ist gut. Benachteiligt sind sehende Nutzer mit Tastatur oder Touchscreen, weil sie nicht hovern können, um einen Tooltip zu sehen.
Biete für wichtige Produktnamen oder Nachrichten eine Möglichkeit, den Text aufzuklappen, etwa einen Mehr-anzeigen-Button oder ein details-Element, statt dich allein auf die Ellipsis zu verlassen. Setze Line Clamps nur für Vorschauen ein, bei denen der vollständige Text einen Klick entfernt ist.
overflow-Werte im Vergleich
Was jeder overflow-Wert macht
Wert
Überschüssiger Inhalt
Scrollleisten
Scroll-Container?
Tailwind
Wird außerhalb der Box gezeichnet
Nie
Nein
An der Padding-Kante abgeschnitten
Nie
Ja (per Skript scrollbar)
Abgeschnitten
Nie
Nein
Scrollt
Immer sichtbar
Ja
Scrollt
Nur bei Bedarf
Ja
Ellipsis in einer Zeile
Das Ellipsis-Rezept aus drei Zeilen
Entferne eine der drei Deklarationen, und die Punkte verschwinden. Das title-Attribut hält den vollständigen Text verfügbar.
Ellipsis in einer Flex-Zeile
Das mittlere Item bekommt min-width: 0, damit es kleiner als seine Textbreite werden darf. Ohne das läuft stattdessen die Zeile über.
Mehrzeiliger Clamp
Eine Kartenbeschreibung auf drei Zeilen begrenzen
Das Muster mit Präfix unten ist das breit unterstützte. Die einfache line-clamp-Deklaration ist für Browser ergänzt, die sie bereits verstehen.
word-break vs overflow-wrap vs hyphens
Lange Wörter umbrechen
Deklaration
Bricht wo um
Geeignet für
Tailwind
overflow-wrap: break-word
Innerhalb eines Worts nur, wenn es überlaufen würde
Fließtext mit gelegentlich langen Wörtern
overflow-wrap: anywhere
Ebenso, und die Box darf schrumpfen
URLs in Flex-Items und schmalen Spalten
wrap-anywhere (v4.1)
word-break: break-all
Zwischen beliebigen Buchstaben, immer
Code, Hashes, IDs
word-break: keep-all
Nie innerhalb von CJK-Wörtern
Chinesisch, Japanisch, Koreanisch
hyphens: auto
An Silbengrenzen, mit Trennstrich
Schmaler Text oder Blocksatz mit gesetztem lang
Dieselbe URL mit vier Umbruch-Einstellungen
Jede Box ist 160px breit. Nur die letzte darf überlaufen.
Tabellenzellen kürzen
Festes Tabellenlayout mit Ellipsis-Zellen
table-layout: fixed sorgt dafür, dass die Spaltenbreiten Vorrang vor dem Inhalt haben, sodass die Ellipsis greifen kann.
Lange URL
Deutsches Kompositum
Absatz
Frische Kaffeebohnen werden jeden Dienstag geröstet und noch am selben Nachmittag verschickt, sodass sie die meisten Adressen innerhalb von drei Tagen nach dem Rösten erreichen, solange das Aroma noch am besten ist.
Ellipsis allein braucht white-space: nowrap (oder einen Line Clamp).
Ellipsis braucht overflow mit dem Wert hidden oder clip.
Ein Line Clamp braucht overflow: hidden, um den Rest abzuschneiden.