text-overflow & hyphens

Zuletzt aktualisiert am 15. Februar 2026

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.

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

text-overflow

hyphens

Beispiele

Das Ellipsis-Trio

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

/* 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>

Mehrzeiliges Ellipsis mit line-clamp

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

.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>

Automatische Silbentrennung

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.

.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>

Manuelle Trennstellen mit Soft Hyphens

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.

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

p {
  hyphens: manual; /* Standard: nur an ­ 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>Daten­schutz­grund­ver­ordnung</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

• 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.
• hyphens: auto ohne lang-Attribut: Die automatische Silbentrennung braucht die Sprachangabe im HTML (lang="de"). Ohne lang kann der Browser die Trennregeln nicht anwenden.
• 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.
• 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.
• 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.
• 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

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.

Email-Kompatibilität

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.

Verwandte Eigenschaften