line-clamp und text-wrap: balance/pretty: Moderne Typografie-Utilities in Tailwind

1. Warum variable Textlängen Kartenlayouts sprengen

In Produktkarten, Blog-Teasern oder Nutzerprofilen kommt Text selten in exakt der Länge, die das Design vorsieht. Ein Redakteur schreibt einen Teaser mit drei Zeilen, ein anderer mit sieben, und ohne Begrenzung sprengt die längere Variante das Kartenraster, verschiebt Buttons und macht ein eigentlich einheitliches Layout unruhig. Klassische Lösungen wie serverseitiges Abschneiden der Zeichenkette auf eine feste Zeichenzahl sind unzuverlässig, weil unterschiedliche Schriftgrößen, Zeichenbreiten und Viewport-Breiten dazu führen, dass die gleiche Zeichenzahl mal in zwei, mal in vier Zeilen umbricht.

CSS bietet mit line-clamp inzwischen eine robuste, rein visuelle Lösung, die unabhängig von der tatsächlichen Zeichenzahl nach einer festen Anzahl Zeilen abschneidet und den Rest mit Auslassungspunkten kennzeichnet. Tailwind macht diese Eigenschaft über einfache Utility-Klassen zugänglich, sodass Entwickler keine eigene CSS-Datei pflegen müssen, nur um Kartenlayouts konsistent zu halten. Kombiniert mit den neueren text-wrap-Utilities für Überschriften entsteht ein Werkzeugkasten, der praktisch jedes Textlängen-Problem im responsiven Layout ohne JavaScript löst.

2. line-clamp Utility Grundlagen in Tailwind

Tailwind stellt die Klassen line-clamp-1 bis line-clamp-6 bereit, die intern auf die CSS-Eigenschaft -webkit-line-clamp zusammen mit display: -webkit-box, -webkit-box-orient: vertical und overflow: hidden zurückgreifen. Trotz des webkit-Präfixes wird diese Eigenschaft inzwischen von allen relevanten Browsern unterstützt, weil sie sich faktisch als Standard etabliert hat, auch wenn sie formal lange nicht in jeder CSS-Spezifikation verabschiedet war. Die Klasse line-clamp-none hebt eine zuvor gesetzte Begrenzung wieder auf, was bei responsiven Designs nützlich ist, wenn ein Text auf großen Bildschirmen vollständig sichtbar sein soll, auf kleinen aber abgeschnitten wird.

Der große Vorteil gegenüber einer festen Höhe mit overflow: hidden liegt darin, dass line-clamp exakt nach ganzen Zeilen abschneidet und automatisch passende Auslassungspunkte setzt, während eine reine Höhenbegrenzung mitten im Wort oder mitten in der Zeile abschneiden kann. Für responsive Anpassungen lassen sich die Klassen mit den üblichen Breakpoint-Präfixen kombinieren, etwa line-clamp-2 für mobile Ansichten und md:line-clamp-3 für größere Viewports, wodurch sich die sichtbare Textmenge je nach verfügbarem Platz steuern lässt.

3. Praxisbeispiel: Kartenlayout mit variabler Textlänge

In einem typischen Kartenraster, etwa für Blogartikel oder Produktübersichten, variiert die Länge der Teaser-Texte stark, während Titel, Bild und Call-to-Action-Button an fester Position bleiben sollen. Ohne Begrenzung würde eine Karte mit langem Teaser deutlich höher werden als ihre Nachbarn, was das Raster optisch zerreißt und bei CSS Grid mit align-items: stretch zu hässlichen Lücken führt. Mit line-clamp-3 auf dem Teaser-Absatz bleibt jede Karte unabhängig vom tatsächlichen Textinhalt gleich hoch, ohne dass der Entwickler die Zeichenzahl serverseitig begrenzen oder mit JavaScript nachmessen muss.

Im folgenden Beispiel wird ein Titel mit line-clamp-2 auf maximal zwei Zeilen begrenzt und ein Teaser-Text mit line-clamp-3 kombiniert, sodass die Gesamthöhe der Textblöcke in jeder Karte identisch bleibt, unabhängig davon, wie lang der ursprüngliche Redaktionstext war. Der Button am Ende wird über mt-auto in einem Flex-Container mit flex-col immer an die untere Kante gedrückt, sodass er in allen Karten auf gleicher Höhe sitzt.