Text in CSS abschneiden

Um Text in CSS abzuschneiden, verwenden Sie text-overflow: ellipsis zum Abschneiden einer einzelnen Zeile und line-clamp zum Begrenzen auf eine feste Anzahl von Zeilen – diese eine Unterscheidung entscheidet über alles andere.

Wer schon einmal beobachtet hat, wie ein Kartentitel weit über seinen Container hinausragt, während text-overflow: ellipsis keinerlei Wirkung zeigte, kennt die Frustration. Das Scheitern liegt fast immer an einem von zwei Dingen: der falschen Technik für die gewünschte Zeilenanzahl oder einem Flex-Elternelement, das sich stillschweigend weigert zu schrumpfen. Einzeiliges Abschneiden erfordert drei zusammenwirkende Deklarationen; mehrzeiliges Abschneiden benötigt das -webkit-box-Trio. Die Stellen, die in der Produktion tatsächlich Probleme bereiten, sind überschaubar: Ellipsis schlägt innerhalb von Flexbox lautlos fehl, mehrzeiliges Clamping schlägt fehl, wenn der Text nicht umbrechen kann, und JavaScript-basiertes Abschneiden zerstört stillschweigend Inhalte, die Screenreader benötigen. Dieser Artikel führt durch jedes funktionierende Muster und die damit verbundene Fehlerquelle.

Hier ist die Entscheidungsregel in Tabellenform:

Wie schneidet man eine einzelne Textzeile ab?

Um eine einzelne Textzeile abzuschneiden, müssen drei Deklarationen zusammenwirken: white-space: nowrap verhindert den Zeilenumbruch, overflow: hidden schneidet den überlaufenden Inhalt ab, und text-overflow: ellipsis fügt das … hinzu. Lässt man eine der drei Deklarationen weg, funktioniert der Effekt nicht mehr: text-overflow allein hat keine Wirkung auf umgebrochenen Text, und ohne overflow: hidden gibt es keinen Clipping-Bereich, gegen den die Ellipsis gesetzt werden könnte.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Das Element benötigt außerdem eine einschränkende Breite. Ist der Container breit genug, um die gesamte Zeichenkette in einer Zeile darzustellen, entsteht kein Überlauf und keine Ellipsis erscheint: Die Breite des Elternelements erzwingt das Abschneiden. Wenden Sie dies auf Karten, Tabellenzellen, Navigationselemente oder Überschriften an, die in einer Zeile bleiben müssen.

Die text-overflow-Eigenschaft akzeptiert clip (der standardmäßige harte Schnitt), ellipsis und einen benutzerdefinierten <string>-Wert. Es gibt auch ein fade-Schlüsselwort und eine fade()-Funktion, die im CSS Overflow Level 4-Standard hinzugefügt wurden und nun in der formalen MDN-Syntax aufgeführt sind – jedoch implementiert kein Browser diese Werte effektiv, verlassen Sie sich daher in der Produktion nicht darauf.

Wie schneidet man Text auf mehrere Zeilen ab?

Für mehrzeiliges Abschneiden setzen Sie display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N und overflow: hidden. Trotz der Vendor-Präfixe wird diese Kombination von allen gängigen Browsern unterstützt und ist heute der produktionssichere Ansatz.

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Behalten Sie overflow: hidden bei. Wie MDN anmerkt, wird der Text ohne diese Deklaration nicht tatsächlich abgeschnitten, obwohl die Ellipsis nach der angegebenen Zeilenanzahl dennoch erscheint – das Ergebnis ist, dass sowohl die Ellipsis als auch der überlaufende Text darunter sichtbar sind. Diese Präfix-Eigenschaften sind außerdem voneinander abhängig: -webkit-line-clamp hat nur dann eine Wirkung, wenn display auf -webkit-box (oder -webkit-inline-box) und -webkit-box-orient auf vertical gesetzt ist. Die Präfix-Eigenschaften sind formal als veraltet markiert, aber diese dreifache Abhängigkeit ist selbst ein spezifiziertes Verhalten, das Browser weiterhin unterstützen werden – der Einsatz in der Produktion birgt daher kein nennenswertes Risiko.

Ein zu beachtender Fehlerfall: Mehrzeiliges Clamping funktioniert nur, wenn dem Text das Umbrechen erlaubt ist. Ein vererbtes white-space: nowrap bricht es stillschweigend, indem alles auf eine einzige Zeile zusammengefasst wird. Halten Sie white-space auf normal oder pre-wrap.

Es gibt auch eine präfixfreie Standard-line-clamp-Eigenschaft, die im CSS Overflow Module Level 4 definiert ist und den Inhalt eines Blocks auf eine festgelegte Zeilenanzahl begrenzt. Stand 2026 ist sie jedoch noch nicht als Baseline eingestuft, da einige weit verbreitete Browser sie noch nicht unterstützen. Behandeln Sie sie als Progressive Enhancement. Fügen Sie sie ergänzend zu den Präfix-Deklarationen hinzu, nicht als Ersatz:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* standardisiert, ergänzend hinzufügen — noch kein vollständiger Ersatz */
  overflow: hidden;
}

Warum Ellipsis innerhalb von Flexbox (und Grid) fehlschlägt

Ellipsis schlägt bei einem Flex-Kind-Element lautlos fehl, weil das standardmäßige min-width: auto eines Flex-Elements verhindert, dass es unter die Inhaltsbreite schrumpft – das Element wird daher nie schmal genug, um einen Überlauf zu erzeugen, und text-overflow hat nichts zum Abschneiden. Das Kind-Element ragt über seinen Container hinaus, anstatt abgeschnitten zu werden. Die Lösung besteht aus einer einzigen Deklaration am Kind-Element:

.card { display: flex; }

.card__label {
  min-width: 0; /* überschreibt die automatische Mindestbreite, damit das Element schrumpfen kann */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Die automatische Mindestgrößenbestimmung durch min-width: auto gilt auch für Grid-Elemente, weshalb das Abschneiden innerhalb einer CSS-Grid-Spur aus demselben Grund fehlschlägt. Die Lösung ist identisch: Setzen Sie min-width: 0 auf das Kind-Element (oder overflow: hidden, was die automatische Mindestbreite ebenfalls aufhebt). Dies ist der bei weitem häufigste Abschneidefehler in der Praxis: Das CSS sieht isoliert betrachtet korrekt aus und schlägt erst fehl, sobald das Element ein Flex- oder Grid-Kind-Element ist.

Tailwind-Entsprechungen

Tailwind liefert beide Muster als Utilities mit, ohne dass ein Plugin erforderlich ist. Die truncate-Utility ist eine zusammengesetzte Klasse, die overflow: hidden, text-overflow: ellipsis und white-space: nowrap setzt: das vollständige Rezept für einzeiliges Abschneiden in einer einzigen Klasse. Für mehrere Zeilen gibt line-clamp-<n> (beispielsweise line-clamp-3 oder line-clamp-none zum Deaktivieren) das -webkit-box-Trio aus. Line-Clamp-Utilities sind seit v3.3 Teil des Tailwind-Kerns; das aktuelle stabile Release ist v4.3.3 (Juli 2026), es muss also nichts zusätzlich installiert werden.

<p class="truncate">Einzelne Zeile, mit Ellipsis abgeschnitten…</p>
<p class="line-clamp-3">Mehrere Zeilen, auf drei begrenzt…</p>

Fügen Sie innerhalb eines Flex- oder Grid-Kind-Elements min-w-0 hinzu: die Utility-Entsprechung des min-width: 0-Fixes.

Barrierefreiheit: CSS-Abschneiden vs. JS-Abschneiden

Da CSS-Abschneiden rein präsentationell ist, verbleibt die vollständige Zeichenkette im DOM, und Screenreader lesen sie vollständig – ohne dass ein aria-label erforderlich wäre. Dies ist der entscheidende Unterschied zum JavaScript-Abschneiden: Ein text.substring(0, 50)-Ansatz überschreibt den DOM-Knoten, sodass der abgeschnittene Text für alle verloren geht – einschließlich assistiver Technologien –, sofern er nicht separat über ein title- oder aria-label-Attribut erhalten bleibt.

Auch bei CSS-Abschneiden werden Informationen visuell verborgen. Session-Replays von Produktions-UIs zeigen regelmäßig diese Art von Problem: Ein Nutzer schwebt über eine abgeschnittene Tabellenzelle oder ein Navigationselement oder versucht es zu entziffern, das genau das eine Detail verbirgt, das er benötigte. Kombinieren Sie das Abschneiden von informationstragenden Inhalten mit einem title-Attribut oder einer Erweiterungsmöglichkeit:

<span class="truncate" title="Quarterly revenue report — EMEA region, Q3 2026">
  Quarterly revenue report — EMEA region, Q3 2026
</span>

Eine wichtige Einschränkung: Die -webkit-line-clamp-Ellipsis kann nicht angepasst werden, und text-overflow gilt nicht für sie, da text-overflow nur Inline-Überlauf betrifft. Wenn Sie einen benutzerdefinierten Abschneideindikator für mehrzeiligen Text benötigen, ist das ein Signal, ein anderes Muster zu verwenden, anstatt gegen das Clamping anzukämpfen.

Greifen Sie auf text-overflow: ellipsis zurück, wenn Sie eine Zeile benötigen, und auf das line-clamp-Trio, wenn Sie mehrere benötigen. Denken Sie an min-width: 0, sobald das Element innerhalb von Flex oder Grid liegt, und fügen Sie ein title-Attribut überall dort hinzu, wo der verborgene Text eine Bedeutung trägt. Damit sind die Muster abgedeckt, die korrekt funktionieren, und die drei, die es stillschweigend nicht tun.

FAQs

Was ist der Unterschied zwischen text-overflow: ellipsis und line-clamp?

Verwenden Sie text-overflow: ellipsis zum Abschneiden einer einzelnen Zeile und line-clamp zum Begrenzen auf eine feste Anzahl von Zeilen. Einzeiliges Abschneiden erfordert drei zusammenwirkende Deklarationen: white-space: nowrap, overflow: hidden und text-overflow: ellipsis. Mehrzeiliges Clamping benötigt das -webkit-box-Trio plus overflow: hidden und reagiert überhaupt nicht auf text-overflow, da diese Eigenschaft nur Inline-Überlauf betrifft.

Warum funktioniert mein Ellipsis-Abschneiden innerhalb von Flexbox oder Grid nicht?

Das standardmäßige min-width: auto eines Flex- oder Grid-Elements verhindert, dass es unter seine Inhaltsbreite schrumpft, sodass das Element nie schmal genug wird, um einen Überlauf zu erzeugen, und text-overflow nichts zum Abschneiden hat. Das Setzen von min-width: 0 auf dem Kind-Element überschreibt die automatische Mindestbreite und stellt das Abschneiden wieder her. Das Anwenden von overflow: hidden auf das Kind-Element hebt die automatische Mindestbreite ebenfalls auf. Dies ist der häufigste Abschneidefehler in der Praxis, da das CSS isoliert betrachtet korrekt aussieht.

Ist die präfixfreie line-clamp-Eigenschaft im Jahr 2026 sicher allein zu verwenden?

Nein. Das standardisierte, präfixfreie line-clamp ist im CSS Overflow Module Level 4 definiert, aber Stand 2026 kennzeichnet MDN es als nicht Baseline, da es in einigen der am häufigsten verwendeten Browser nicht funktioniert. Fügen Sie es ergänzend zu den -webkit-box-, -webkit-box-orient- und -webkit-line-clamp-Deklarationen als Progressive Enhancement hinzu, anstatt sie zu ersetzen. Das Präfix-Trio bleibt heute der produktionssichere Ansatz.

Beeinträchtigt CSS-Abschneiden die Barrierefreiheit für Screenreader?

Nein. CSS-Abschneiden ist rein präsentationell, sodass die vollständige Zeichenkette im DOM verbleibt und Screenreader sie vollständig lesen – ohne aria-label. Das Problem besteht beim JavaScript-Abschneiden: Ein Substring-Ansatz überschreibt den DOM-Knoten und löscht den abgeschnittenen Text für alle, einschließlich assistiver Technologien, sofern er nicht über ein title- oder aria-label-Attribut erhalten bleibt. Für informationstragende Inhalte sollte CSS-Abschneiden unabhängig davon mit einem title-Attribut oder einer Erweiterungsmöglichkeit kombiniert werden.