text-overflow & hyphens

text-overflow bestimmt, wie überlaufender Text in einem Element dargestellt wird, zum Beispiel mit drei Punkten (ellipsis). hyphens steuert die automatische Silbentrennung, die besonders für deutsche Texte mit ihren langen zusammengesetzten Wörtern wertvoll ist. Beide Eigenschaften verbessern die Textdarstellung in engen Layouts. text-overflow braucht immer die Kombination mit overflow: hidden und white-space: nowrap, während hyphens die Sprachangabe im HTML (lang="de") benötigt.

Steckbrief text-overflow

Syntax: text-overflow: clip | ellipsis
Initialwert: clip
Vererbt: Nein
Animierbar: Nein

Kategorie: Typografie
Werte: 7
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

text-overflow kommt erst zum Einsatz, wenn Text tatsächlich überläuft. Dafür müssen zwei Bedingungen erfüllt sein: Der Container braucht overflow: hidden (oder scroll), und der Text darf nicht umbrechen (white-space: nowrap). Erst dann bestimmt text-overflow, ob der abgeschnittene Text mit einem visuellen Hinweis (ellipsis) oder hart abgeschnitten (clip) endet. Dieses Zusammenspiel von drei Eigenschaften wird als “Ellipsis-Trio” bezeichnet.

Für mehrzeiligen Text gibt es kein natives CSS-Feature in der Spezifikation, aber -webkit-line-clamp hat sich als De-facto-Standard etabliert. Zusammen mit display: -webkit-box und -webkit-box-orient: vertical kannst du Text nach einer bestimmten Anzahl von Zeilen mit Ellipsis abschneiden. Trotz des Vendor-Prefix funktioniert es in allen modernen Browsern.

hyphens aktiviert die automatische Silbentrennung basierend auf den Trennregeln der jeweiligen Sprache. Dafür muss das lang-Attribut im HTML gesetzt sein (lang="de" für Deutsch). Die Silbentrennung ist besonders bei schmalem Blocksatz wichtig, weil sie die großen Lücken zwischen Wörtern reduziert, die bei text-align: justify entstehen.

Syntax & Werte

7 Werte

text-overflow

Wert	Beschreibung	Beispiel
`clip`	Text wird am Rand des Containers hart abgeschnitten. Kein visueller Hinweis.	text-overflow: clip
`ellipsis`	Abgeschnittener Text endet mit drei Punkten (…).	text-overflow: ellipsis
`inherit`	Erbt den Wert explizit vom Elternelement.	text-overflow: inherit

hyphens

Wert	Beschreibung	Beispiel
`none`	Keine Silbentrennung, auch nicht an manuellen Trennstellen (&shy;).	hyphens: none
`manual`	Silbentrennung nur an manuellen Trennstellen (&shy; oder Bindestrich).	hyphens: manual
`auto`	Automatische Silbentrennung basierend auf der Sprache (lang-Attribut nötig).	hyphens: auto
`inherit`	Erbt den Wert explizit vom Elternelement.	hyphens: inherit

Beispiele

4 Beispiele

Das klassische Pattern für einzeiligen Text mit drei Punkten. Alle drei Eigenschaften müssen zusammen gesetzt werden, sonst funktioniert es nicht.

Das Ellipsis-Trio

/* Alle drei Eigenschaften sind nötig */
.truncate {
  white-space: nowrap;      /* Umbruch verhindern */
  overflow: hidden;          /* Überlauf verstecken */
  text-overflow: ellipsis;   /* Drei Punkte anzeigen */
}

<div class="ellipsis-trio">
<div class="et-clip"><div class="label">text-overflow: clip</div>Ein sehr langer Titel der nicht in eine Zeile passt und abgeschnitten wird</div>
<div class="et-ellipsis"><div class="label">text-overflow: ellipsis</div>Ein sehr langer Titel der nicht in eine Zeile passt und abgeschnitten wird</div>
<div class="et-missing"><div class="label">Ohne white-space: nowrap (bricht um)</div>Ein sehr langer Titel der nicht in eine Zeile passt und abgeschnitten wird</div>
</div>

Mit -webkit-line-clamp kannst du Text nach einer bestimmten Anzahl von Zeilen abschneiden. Das ist ideal für Artikelvorschauen, Produktbeschreibungen oder Kommentare.

Mehrzeiliges Ellipsis mit line-clamp

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* Nach 3 Zeilen abschneiden */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<div class="clamp-demo">
<div class="card"><div class="label">2 Zeilen</div><div class="card-title">Artikel-Vorschau</div><p class="cl-2">Dies ist ein längerer Vorschautext für einen Blog-Artikel. Er enthält mehrere Sätze, die nach einer bestimmten Anzahl von Zeilen mit drei Punkten abgeschnitten werden.</p></div>
<div class="card"><div class="label">3 Zeilen</div><div class="card-title">Artikel-Vorschau</div><p class="cl-3">Dies ist ein längerer Vorschautext für einen Blog-Artikel. Er enthält mehrere Sätze, die nach einer bestimmten Anzahl von Zeilen mit drei Punkten abgeschnitten werden.</p></div>
</div>

hyphens: auto trennt Wörter automatisch nach den Regeln der jeweiligen Sprache. Für Deutsch ist das besonders nützlich, weil zusammengesetzte Wörter sehr lang werden können. Wichtig: Das lang-Attribut muss im HTML gesetzt sein.

Automatische Silbentrennung für deutsche Texte

.text-de {
  hyphens: auto;
  -webkit-hyphens: auto; /* Safari */
  text-align: justify;   /* Blocksatz profitiert am meisten */
}

<p lang="de">Langer deutscher Text...</p>

<div class="hyphens-demo">
<div class="hy-none" lang="de"><div class="label">hyphens: none</div>Die Bundesausbildungsförderungsgesetzgebung regelt die Voraussetzungen für Ausbildungsförderung in Deutschland.</div>
<div class="hy-auto" lang="de"><div class="label">hyphens: auto</div>Die Bundesausbildungsförderungsgesetzgebung regelt die Voraussetzungen für Ausbildungsförderung in Deutschland.</div>
</div>

Mit dem Soft Hyphen () kannst du exakte Trennstellen im HTML definieren. Der Trennstrich erscheint nur, wenn der Browser an dieser Stelle tatsächlich umbricht. Das ist nützlich für Wörter, bei denen die automatische Trennung versagt.

Manuelle Trennstellen mit Soft Hyphen

<!-- Soft Hyphen: Trennstrich nur bei Bedarf -->
<p>Daten&shy;schutz&shy;grund&shy;ver&shy;ordnung</p>

p {
  hyphens: manual; /* Standard: nur an &shy; trennen */
}

<div class="shy-demo">
<div><div class="label">Ohne &amp;shy;</div>Datenschutzgrundverordnung</div>
<div class="shy-manual"><div class="label">Mit &amp;shy;</div>Datenschutzgrundverordnung</div>
</div>

Barrierefreiheit

Abgeschnittener Text mit text-overflow: ellipsis ist für Screenreader trotzdem vollständig zugänglich. Die drei Punkte sind nur visuell, der komplette Text wird vorgelesen. Stelle aber sicher, dass sehende Nutzer den vollständigen Text ebenfalls erreichen können, zum Beispiel durch einen Tooltip (title-Attribut), einen Klick auf das Element oder eine Hover-Erweiterung.

Silbentrennung mit hyphens: auto verbessert die Lesbarkeit für alle Nutzer, besonders bei schmalem Blocksatz. Screenreader ignorieren die Trennstriche und lesen das Wort als Ganzes vor. Das ist korrekt und erwartet. Manuelle Soft Hyphens () werden ebenfalls von Screenreadern ignoriert.

Bei mehrzeiligem Ellipsis mit -webkit-line-clamp wird der versteckte Text von Screenreadern vorgelesen. Das kann zu einer Diskrepanz zwischen dem führen, was sehende Nutzer sehen, und dem, was Screenreader-Nutzer hören. Überlege, ob du ein aria-label mit einer kurzen Zusammenfassung ergänzen möchtest, oder biete einen “Mehr lesen”-Link an.

Häufige Fehler

6 Fehler

01 Ellipsis ohne overflow: hidden

text-overflow: ellipsis funktioniert nur zusammen mit overflow: hidden und white-space: nowrap. Fehlt eine der drei Eigenschaften, wird kein Ellipsis angezeigt.

02 hyphens: auto ohne lang-Attribut

Die automatische Silbentrennung braucht die Sprachangabe im HTML (lang="de"). Ohne lang kann der Browser die Trennregeln nicht anwenden.

03 Ellipsis auf Block-Elemente ohne Breitenbegrenzung

text-overflow: ellipsis braucht einen Container mit fester oder begrenzter Breite. Bei width: auto gibt es keinen Überlauf und damit kein Ellipsis.

04 line-clamp ohne -webkit-box

-webkit-line-clamp funktioniert nur zusammen mit display: -webkit-box und -webkit-box-orient: vertical. Alle drei Eigenschaften müssen gesetzt werden.

05 Vendor-Prefix für hyphens vergessen

Safari braucht -webkit-hyphens: auto zusätzlich zu hyphens: auto. Ohne den Prefix funktioniert die Silbentrennung in Safari nicht.

06 hyphens: none mit verwechseln

hyphens: none unterdrückt alle Silbentrennungen, auch manuelle -Trennstellen. Für manuelle Trennung brauchst du hyphens: manual (den Standardwert).

Browser-Kompatibilität

5 von 5

text-overflow wird von allen Browsern vollständig unterstützt. hyphens: auto funktioniert in allen modernen Browsern, benötigt in Safari aber den -webkit-Prefix. -webkit-line-clamp wird trotz Vendor-Prefix von allen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett

-webkit-hyphens nötig für Silbentrennung
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

text-overflow: ellipsis funktioniert in den meisten Email-Clients zusammen mit den nötigen Begleit-Eigenschaften. hyphens wird in Emails kaum unterstützt. -webkit-line-clamp ist in Emails nicht verwendbar.

Apple Mail

Komplett
Gmail

Teilweise

text-overflow: ellipsis funktioniert, hyphens wird nicht unterstützt
Outlook

Teilweise

text-overflow wird teilweise unterstützt, hyphens und line-clamp nicht
Thunderbird

Komplett
Yahoo Mail

Teilweise

text-overflow funktioniert, hyphens nicht zuverlässig

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da