word-break & overflow-wrap

Zuletzt aktualisiert am 15. Februar 2026

word-break und overflow-wrap bestimmen, ob und wie der Browser Wörter umbrechen darf, die nicht in eine Zeile passen. Ohne diese Eigenschaften läuft ein einzelnes langes Wort oder eine URL über den Container hinaus. word-break erlaubt den Umbruch an beliebiger Stelle im Wort, während overflow-wrap nur dann umbricht, wenn es keine andere Möglichkeit gibt. Beide Eigenschaften lösen das gleiche Problem, unterscheiden sich aber in ihrer Aggressivität.

Grundlagen

Wenn ein einzelnes Wort länger ist als der Container, läuft es standardmäßig über den Rand hinaus. Das passiert typischerweise bei langen URLs, Dateipfaden, Base64-Strings oder zusammengesetzten deutschen Wörtern wie “Donaudampfschifffahrtsgesellschaft”. Genau dieses Problem lösen word-break und overflow-wrap.

word-break: break-all ist die aggressivste Variante: Der Browser darf an jeder beliebigen Stelle im Wort umbrechen, auch mitten in einem normalen Wort. Das führt zu einem kompakten Layout, kann aber die Lesbarkeit beeinträchtigen, weil auch kurze Wörter willkürlich getrennt werden.

overflow-wrap: break-word ist die sanftere Alternative. Der Browser versucht zuerst, an normalen Umbruchstellen (Leerzeichen, Bindestriche) zu brechen. Nur wenn ein einzelnes Wort nicht in die Zeile passt, wird es umgebrochen. Das ergibt ein natürlicheres Schriftbild. overflow-wrap: anywhere funktioniert ähnlich, beeinflusst aber zusätzlich die Berechnung der minimalen Inhaltsbreite (min-content), was bei Flexbox- und Grid-Layouts relevant sein kann.

Syntax & Werte

word-break

overflow-wrap

Beispiele

Das Überlauf-Problem

Ohne word-break oder overflow-wrap läuft ein langes Wort einfach über den Container hinaus. Das ist besonders bei URLs und langen Strings ein häufiges Layout-Problem.

/* Sanfter Umbruch (empfohlen) */
.text { overflow-wrap: break-word; }

/* Aggressiver Umbruch */
.text { word-break: break-all; }

<div class="overflow-demo">
<div class="ov-normal"><div class="label">Ohne Umbruch (Problem)</div>https://beispiel.de/sehr/langer/pfad/zu/einer/wichtigen/seite/index.html</div>
<div class="ov-break"><div class="label">overflow-wrap: break-word</div>https://beispiel.de/sehr/langer/pfad/zu/einer/wichtigen/seite/index.html</div>
<div class="ov-all"><div class="label">word-break: break-all</div>https://beispiel.de/sehr/langer/pfad/zu/einer/wichtigen/seite/index.html</div>
</div>

word-break vs overflow-wrap

Der entscheidende Unterschied: word-break: break-all bricht auch normale Wörter mitten im Wort um, während overflow-wrap: break-word nur lange, nicht passende Wörter trennt.

/* Bricht ALLE Wörter aggressiv */
.aggressive { word-break: break-all; }

/* Bricht NUR zu lange Wörter */
.gentle { overflow-wrap: break-word; }

<div class="compare-demo">
<div class="cmp-breakall"><div class="label">word-break: break-all</div>Kurze Wörter werden auch mitten im Wort umgebrochen. Das sieht bei normalem Text ungewohnt aus. Superlangefunktionsbezeichnung.</div>
<div class="cmp-breakword"><div class="label">overflow-wrap: break-word</div>Kurze Wörter werden normal umgebrochen. Nur das lange Wort wird getrennt. Superlangefunktionsbezeichnung.</div>
</div>

Lange Strings in Cards

Ein typisches Praxisbeispiel: Benutzereingaben in einer Card-Komponente können beliebig lang sein. overflow-wrap: break-word schützt das Layout vor dem Überlaufen.

.card {
  overflow-wrap: break-word; /* Schützt vor Überlauf */
  padding: 1rem;
}

<div class="card-demo">
<div class="card">
  <div class="card-title">Datei-Upload</div>
  <span class="card-url">https://api.beispiel.de/uploads/2026/02/mein-sehr-langes-dokument-mit-vielen-details.pdf</span>
  <span class="card-hash">SHA256: e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855</span>
</div>
<div class="card">
  <div class="card-title">Profil</div>
  <span class="card-url">mario@programmierenmitmario.dev</span>
  <span class="card-hash">Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0</span>
</div>
</div>

CJK-Text mit keep-all

word-break: keep-all verhindert den Umbruch innerhalb von CJK-Wörtern (Chinesisch, Japanisch, Koreanisch). Standardmäßig kann CJK-Text zwischen jedem Zeichen umbrechen. Mit keep-all erfolgt der Umbruch nur an Leerzeichen oder Satzzeichen.

/* Für CJK-Sprachen: Umbruch nur an Leerzeichen */
.cjk-text {
  word-break: keep-all;
}

<div class="cjk-demo">
<div class="cjk-normal"><div class="label">word-break: normal</div>日本語のテキストは通常、文字間で改行されます。</div>
<div class="cjk-keepall"><div class="label">word-break: keep-all</div>日本語のテキストは通常、文字間で改行されます。</div>
</div>

Barrierefreiheit

Erzwungene Wortumbrüche mit word-break: break-all können die Lesbarkeit für alle Nutzer beeinträchtigen, besonders aber für Menschen mit Legasthenie oder kognitiven Einschränkungen. Wenn ein Wort mitten in einer Zeile getrennt wird, ohne einen Trennstrich, ist nicht immer klar, dass es sich um ein zusammenhängendes Wort handelt. Bevorzuge daher overflow-wrap: break-word, das nur im Notfall trennt.

Screenreader lesen den Text unabhängig von der visuellen Darstellung vor. Ein durch word-break umgebrochenes Wort wird trotzdem korrekt als ein Wort vorgelesen. Für die Zugänglichkeit per Screenreader gibt es also keinen Unterschied. Sehende Nutzer mit assistiven Technologien können aber durch willkürliche Trennungen irritiert werden.

Wenn du overflow-wrap: break-word verwendest, überlege, ob du zusätzlich hyphens: auto setzen kannst. Dann fügt der Browser an der Trennstelle einen Bindestrich ein, was die Lesbarkeit deutlich verbessert, weil klar erkennbar ist, dass das Wort fortgesetzt wird.

Häufige Fehler

• word-break und overflow-wrap verwechseln: word-break: break-all trennt alle Wörter aggressiv. overflow-wrap: break-word trennt nur Wörter, die nicht in die Zeile passen. Für die meisten Fälle ist overflow-wrap die bessere Wahl.
• word-wrap statt overflow-wrap verwenden: word-wrap ist der alte Name für overflow-wrap. Er funktioniert noch, aber overflow-wrap ist der offizielle Standard. Verwende overflow-wrap in neuem Code.
• break-all auf Fließtext setzen: word-break: break-all auf normalen Absätzen trennt auch kurze Wörter mitten im Wort. Das sieht unnatürlich aus. Verwende es nur für technische Inhalte wie URLs oder Hashes.
• overflow-wrap ohne Container-Breite: overflow-wrap: break-word wirkt nur, wenn der Container eine definierte Breite hat. Bei width: auto ohne Begrenzung durch ein Elternelement läuft der Text trotzdem über.
• Nur word-break für URLs verwenden: Für URLs ist overflow-wrap: break-word die bessere Wahl, weil es den Umbruch nur erzwingt, wenn die URL tatsächlich zu lang ist. word-break: break-all würde auch kurze URLs aggressiv trennen.
• hyphens vergessen: Wenn du Wörter umbrichst, fehlt ohne hyphens: auto der Trennstrich. Der Leser sieht dann ein Wort, das plötzlich in der nächsten Zeile weitergeht, ohne visuellen Hinweis auf die Trennung.

Browser-Kompatibilität

word-break und overflow-wrap werden von allen modernen Browsern vollständig unterstützt. Der veraltete Name word-wrap funktioniert ebenfalls überall als Alias.

Email-Kompatibilität

Für Emails ist word-wrap: break-word die sicherste Wahl, da es auch in älteren Clients funktioniert. overflow-wrap wird nicht überall unterstützt.

Verwandte Eigenschaften