line-clamp Muster für Textkürzung: Mehrzeilige Ellipsis ohne JavaScript

1. Warum Textkürzung ein wiederkehrendes Layout-Problem ist

Karten-Layouts, Produktlisten und Vorschau-Snippets haben ein gemeinsames Problem: der eingehende Text hat eine unbekannte, variable Länge, aber das Layout braucht eine konsistente, vorhersehbare Höhe. Ohne line-clamp führt ein zu langer Produktname oder eine ausführliche Beschreibung dazu, dass einzelne Karten in einem Grid höher werden als ihre Nachbarn, was das gesamte Raster optisch zerstört und uneinheitlich wirken lässt.

Vor der Existenz von line-clamp lösten Entwickler dieses Problem entweder mit overflow: hidden und einer festen max-height, was Text mitten in einer Zeile brutal abschneidet, oder mit JavaScript, das die Textbreite zur Laufzeit misst und den String manuell auf eine berechnete Zeichenanzahl kürzt. Beide Ansätze haben erhebliche Nachteile: die reine Höhenbegrenzung erzeugt hässliche, halb abgeschnittene Buchstaben, und die JavaScript-Lösung ist fehleranfällig bei unterschiedlichen Schriftgrößen, Sprachen und variablen Zeichenbreiten.

Besonders in internationalen Projekten mit mehreren Sprachversionen zeigt sich die Schwäche der JavaScript-Lösung deutlich: ein deutscher Produktname kann durch zusammengesetzte Wörter deutlich länger werden als sein englisches Pendant, und eine fest kodierte Zeichenanzahl-Grenze, die für Englisch passt, kürzt deutschen Text entweder zu aggressiv oder gar nicht.

line-clamp löst dieses Problem direkt im Browser: die Eigenschaft begrenzt einen Textblock auf eine feste Anzahl Zeilen und ersetzt automatisch das letzte sichtbare Wort durch eine Ellipsis, wenn der Text nicht in die verfügbaren Zeilen passt. Das Ergebnis ist eine saubere, an Wortgrenzen ausgerichtete Kürzung, die sich automatisch an jede Schriftgröße, jede Spaltenbreite und jede Sprache anpasst.

Dieser Automatismus ist der zentrale Unterschied zu allen manuellen Ansätzen: der Browser kennt die tatsächlich gerenderte Zeichenbreite jeder Glyphe und kann deshalb exakt bestimmen, wie viel Text in eine bestimmte Zeilenanzahl passt, während eine JavaScript-Lösung diese Information erst mühsam nachbilden müsste, etwa über eine unsichtbare Mess-Instanz im DOM.

2. line-clamp: die Grundlagen

Die Eigenschaft line-clamp begrenzt die Anzahl der sichtbaren Zeilen eines Blockelements auf einen festen Wert. Damit die Kürzung funktioniert, müssen drei CSS-Eigenschaften gemeinsam gesetzt werden: display: -webkit-box oder in moderneren Implementierungen einfach display: block zusammen mit line-clamp, overflow: hidden, damit überschüssiger Text nicht sichtbar wird, und line-clamp selbst mit der gewünschten Zeilenanzahl als Zahlenwert.

Ohne overflow: hidden hat line-clamp keinerlei sichtbaren Effekt, weil die Eigenschaft selbst nur definiert, ab welcher Zeile abgeschnitten werden soll, während overflow dafür sorgt, dass der abgeschnittene Teil tatsächlich unsichtbar wird und die Ellipsis eingefügt wird. Diese Kombination aus mehreren Eigenschaften ist ein häufiger Stolperstein für Entwickler, die line-clamp zum ersten Mal einsetzen und sich wundern, warum eine isolierte line-clamp: 3-Deklaration scheinbar nichts bewirkt.

/* Modern syntax: line-clamp works with plain block display */
.card-description {
  display: block;
  line-clamp: 3;
  overflow: hidden;
}

/* Legacy syntax still required for broader compatibility */
.card-description-legacy {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

3. Vom -webkit-Präfix zur Standard-Eigenschaft

Die Geschichte von line-clamp ist ungewöhnlich: die Eigenschaft existierte über ein Jahrzehnt lang ausschließlich als -webkit-line-clamp, ein herstellerspezifisches Präfix, das ursprünglich nur für WebKit-basierte Browser gedacht war. Weil das Feature so nützlich war, übernahmen jedoch nahezu alle Browser, einschließlich Chrome, Firefox und Edge, dieses Präfix zusätzlich zu ihrer eigenen Engine, sodass -webkit-line-clamp de facto zum universellen Standard wurde, obwohl es formal nie in einer offiziellen Spezifikation als herstellerübergreifend definiert war.

Erst mit der CSS Overflow Level 3 Spezifikation wurde line-clamp als reguläre, präfixfreie Eigenschaft standardisiert, die zusammen mit display: block statt der alten -webkit-box-Syntax funktioniert. Für maximale Kompatibilität über alle aktuell im Einsatz befindlichen Browser hinweg empfiehlt sich weiterhin, beide Schreibweisen parallel zu deklarieren, wobei die modernere Syntax als letzte Deklaration steht und somit bei Unterstützung Vorrang hat, während ältere Browser weiterhin auf die WebKit-Variante zurückfallen.

Diese doppelte Deklaration mag auf den ersten Blick redundant wirken, ist aber ein bewährtes und risikoarmes Muster, weil CSS unbekannte Eigenschaften grundsätzlich ignoriert, statt einen Fehler zu werfen. Ein Browser, der die Standard-Syntax noch nicht kennt, überspringt sie einfach und behält die zuvor gesetzte Legacy-Deklaration bei.

/* Dual syntax for maximum compatibility across browser versions */
.excerpt {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;

  /* Standard syntax overrides where supported */
  display: block;
  line-clamp: 4;
}

4. Praxismuster: Kartentitel und Beschreibungen kürzen

Der häufigste Anwendungsfall für line-clamp ist eine Produktkarte oder Artikelvorschau mit Titel und Kurzbeschreibung. Der Titel wird häufig auf zwei Zeilen begrenzt, die Beschreibung auf drei bis vier Zeilen, sodass alle Karten in einem Grid dieselbe Höhe erhalten, unabhängig davon, ob der eingehende Titel oder Beschreibungstext kurz oder lang ist.

Ein wichtiges Detail in der Praxis: die tatsächlich sichtbare Zeilenhöhe hängt von line-height ab, und für ein wirklich konsistentes Karten-Layout sollte zusätzlich eine feste Mindesthöhe für den Textcontainer gesetzt werden, basierend auf der maximalen Zeilenanzahl multipliziert mit der Zeilenhöhe. So bleibt die Kartenhöhe auch dann konsistent, wenn ein Text kürzer ist als die erlaubte Zeilenanzahl und deshalb gar keine Kürzung nötig wird.

Für Titel, die aus SEO-Gründen möglichst prägnant formuliert werden, empfiehlt sich zusätzlich eine redaktionelle Richtlinie zur maximalen Zeichenanzahl, damit die line-clamp-Kürzung im Regelfall gar nicht erst greifen muss und Titel im Idealfall vollständig sichtbar bleiben, während die CSS-Regel als Sicherheitsnetz für Ausnahmefälle dient.

/* Product card with consistent height regardless of text length */
.product-card__title {
  font-size: 1.125rem;
  line-height: 1.4;
  min-height: calc(1.4em * 2); /* reserve space for 2 lines even if shorter */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__description {
  font-size: 0.9375rem;
  line-height: 1.5;
  min-height: calc(1.5em * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #64748b;
}

5. Responsive Zeilenanzahl je Breakpoint

Eine feste Zeilenanzahl, die für Desktop passt, kann auf mobilen Geräten mit schmaleren Spalten zu wenig oder zu viel Text sichtbar lassen, weil sich die tatsächliche Zeichenanzahl pro Zeile mit der Spaltenbreite ändert. line-clamp lässt sich problemlos in Media Queries einbetten, sodass etwa eine mobile Karte nur zwei Zeilen Beschreibung zeigt, während dieselbe Karte im Desktop-Grid mit breiterer Spalte vier Zeilen anzeigen kann, ohne dass das Layout instabil wird.

Diese responsive Anpassung ist besonders wichtig für Produktlisten mit sehr unterschiedlichen Spaltenbreiten zwischen Mobil- und Desktop-Ansicht, etwa ein Ein-Spalten-Layout auf dem Smartphone gegenüber einem Vier-Spalten-Grid auf großen Bildschirmen. Ohne responsive line-clamp-Werte würde entweder auf Mobilgeräten zu viel Text die Karte unnötig strecken, oder auf Desktop zu wenig Text ungenutzten Weißraum hinterlassen.

Ein bewährtes Vorgehen ist, die Zeilenanzahl gemeinsam mit der zugehörigen min-height in derselben Media Query zu pflegen, damit beide Werte synchron bleiben und keine Diskrepanz zwischen erlaubter Zeilenanzahl und reserviertem Platz entsteht, was sonst zu minimal unterschiedlichen Kartenhöhen innerhalb desselben Breakpoints führen könnte.

/* Responsive line-clamp values per breakpoint */
.product-card__description {
  -webkit-line-clamp: 2; /* mobile default: shorter columns */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .product-card__description {
    -webkit-line-clamp: 3; /* tablet: more horizontal space */
  }
}

@media (min-width: 1280px) {
  .product-card__description {
    -webkit-line-clamp: 4; /* desktop: widest columns */
  }
}

6. Zugänglichkeit: was line-clamp NICHT löst

Ein kritischer Punkt, der bei line-clamp häufig übersehen wird: die Eigenschaft kürzt nur die visuelle Darstellung, der vollständige Text bleibt im DOM vorhanden und wird von Screenreadern in voller Länge vorgelesen. Das ist in den meisten Fällen sogar erwünscht, da sehende Nutzer eine gekürzte Vorschau sehen, während Screenreader-Nutzer Zugriff auf den kompletten Inhalt behalten, ohne extra Interaktion.

Problematisch wird es, wenn der abgeschnittene Text keinen Hinweis auf die Kürzung für Screenreader-Nutzer enthält, etwa wenn interaktive Elemente wie Links komplett innerhalb des gekürzten Bereichs verschwinden. In solchen Fällen sollte zusätzlich ein sichtbarer "Mehr lesen"-Link oder ein aria-label mit dem vollständigen Titel ergänzt werden, damit alle Nutzergruppen auf denselben Inhalt zugreifen können, unabhängig davon, ob sie den gekürzten oder den vollständigen Text visuell wahrnehmen.

Ein weiterer wichtiger Hinweis: line-clamp darf niemals verwendet werden, um wichtige rechtliche oder sicherheitsrelevante Informationen zu verstecken, etwa Allergenhinweise oder Vertragsbedingungen, da die Kürzung rein optisch ist und keine bewusste Nutzerentscheidung zum Ausblenden darstellt.

Für Barrierefreiheits-Audits empfiehlt sich zusätzlich ein manueller Test mit aktivierter Tastaturnavigation, um sicherzustellen, dass keine unsichtbaren, aber fokussierbaren Elemente im gekürzten Bereich zu einem verwirrenden Navigationserlebnis führen, das rein visuell nicht nachvollziehbar wäre.

7. Alternativen: line-clamp versus max-height und JavaScript

Die einfachste Alternative zu line-clamp ist eine feste max-height kombiniert mit overflow: hidden, ohne Ellipsis. Dieser Ansatz funktioniert in praktisch jedem Browser, schneidet aber Text mitten in einer Zeile ab, was optisch deutlich unsauberer wirkt als eine saubere Wortgrenzen-Kürzung mit Auslassungspunkten. Für schnelle Prototypen mag das ausreichen, für ein produktionsreifes Designsystem ist line-clamp fast immer die bessere Wahl.

JavaScript-basierte Kürzungsbibliotheken bieten zusätzliche Flexibilität, etwa das Kürzen an beliebiger Stelle im Wort oder komplexere "Mehr anzeigen"-Interaktionen mit Ein- und Ausklappen. Dieser zusätzliche Funktionsumfang kommt aber mit Kosten: zusätzliche Skriptlast, potenzieller Layout-Shift beim Nachladen des Skripts, und Wartungsaufwand für eine externe Abhängigkeit, wo eine native CSS-Lösung ausreichen würde.

Eine pragmatische Faustregel: reine visuelle Kürzung ohne Interaktion gehört zu line-clamp, sobald Nutzer aktiv zwischen gekürzter und vollständiger Ansicht wechseln sollen, etwa über einen expliziten "Mehr anzeigen"-Button, wird zusätzliches JavaScript ohnehin benötigt und line-clamp dient dann nur noch als Ausgangszustand vor der Interaktion.

Für Projekte, die bereits eine Utility-First-Architektur wie Tailwind einsetzen, lässt sich diese Logik zusätzlich direkt als Utility-Klasse abbilden, sodass die Zeilenanzahl je Komponente sichtbar im Markup steht, statt in separaten CSS-Dateien gepflegt zu werden. Das erleichtert es Entwicklern, auf einen Blick zu erkennen, welche Zeilenbegrenzung an welcher Stelle im Layout aktiv ist.

8. Grenzen und typische Stolperfallen

Eine häufige Stolperfalle ist, -webkit-line-clamp ohne display: -webkit-box und -webkit-box-orient: vertical zu setzen. Alle drei Eigenschaften sind für die Legacy-Syntax zwingend erforderlich, fehlt eine davon, hat line-clamp keinerlei sichtbaren Effekt. Ein zweiter häufiger Fehler ist, line-clamp auf ein Element mit display: flex oder display: grid anzuwenden, was in Kombination mit der Legacy--webkit-box-Syntax zu Konflikten führen kann, da beide Display-Modi das Layoutverhalten des Elements grundlegend unterschiedlich definieren.

Eine weitere Grenze betrifft verschachtelte interaktive Elemente: Wenn ein Link oder Button vollständig im abgeschnittenen Bereich landet, wird er für sehende Nutzer unsichtbar, bleibt aber im DOM und damit potenziell per Tastatur fokussierbar, was zu einem verwirrenden, unsichtbaren Fokusring führen kann. Diese Situation sollte durch sorgfältige Content-Struktur vermieden werden, etwa indem interaktive Elemente außerhalb des gekürzten Textblocks platziert werden.

Eine dritte, seltener diskutierte Stolperfalle betrifft Text mit sehr langen, zusammenhängenden Zeichenketten ohne Leerzeichen, etwa URLs oder lange Produktcodes. Da line-clamp auf Wortgrenzen basiert, kann ein einzelnes, extrem langes Wort die gesamte Zeile sprengen, bevor überhaupt eine Kürzung greift. Für solche Fälle sollte zusätzlich overflow-wrap: break-word oder word-break: break-all ergänzt werden, damit auch zusammenhängende Zeichenketten korrekt umbrechen.

9. Textkürzungs-Muster im direkten Vergleich

Die Wahl zwischen den verschiedenen Textkürzungs-Ansätzen hängt vom konkreten Anwendungsfall ab. Die folgende Übersicht vergleicht die gängigsten Muster nach Robustheit, Zugänglichkeit und Implementierungsaufwand.

Für die meisten produktiven Anwendungsfälle ist die Kombination aus line-clamp, einer festen min-height und einem zusätzlichen Link zum Volltext das robusteste Muster, weil es sowohl Layoutkonsistenz als auch vollständigen Content-Zugriff für alle Nutzergruppen sicherstellt.

10. Zusammenfassung

line-clamp löst das wiederkehrende Problem variabler Textlängen in Karten-Layouts direkt im Browser, ohne JavaScript-Messung oder brutales Abschneiden mitten in einer Zeile. Die Kombination aus display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp und overflow: hidden bleibt für maximale Kompatibilität sinnvoll, auch wenn die standardisierte line-clamp-Syntax mit display: block zunehmend verbreitet ist.

Für konsistente Kartenhöhen gehört eine feste min-height zur Textkürzung dazu, und aus Zugänglichkeitsgründen sollte niemals wichtiger Inhalt ausschließlich per line-clamp versteckt werden, ohne einen alternativen Zugang zum vollständigen Text anzubieten. Wer diese Regeln beachtet, bekommt mit einer Handvoll CSS-Zeilen ein robustes, wartungsarmes Textkürzungs-Muster für praktisch jedes Karten-Layout.

Für neue Projekte lohnt sich, das line-clamp-Muster einmal zentral als wiederverwendbare CSS-Klasse oder Utility zu definieren, statt es in jeder Komponente erneut zu implementieren. So bleibt die Textkürzung projektweit konsistent, und Änderungen an der Grundlogik, etwa ein neuer Fallback für zukünftige Browser, müssen nur an einer Stelle gepflegt werden.

11. FAQ: line-clamp Muster für Textkürzung