mitmario.dev

word-break & overflow-wrap

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.

Steckbrief word-break
Syntax
word-break: normal | break-all | keep-all
Initialwert
normal
Vererbt
Ja
Animierbar
Nein
Kategorie
Typografie
Werte
8
Beispiele
4
Browser
5 von 5
E-Mail
3 von 5
Stand
15.02.2026

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

8 Werte

word-break

Wert Beschreibung Beispiel
normal Standardverhalten. Umbruch nur an erlaubten Stellen (Leerzeichen, Bindestriche). word-break: normal
break-all Umbruch an jeder beliebigen Stelle, auch mitten im Wort. word-break: break-all
keep-all Kein Wortumbruch für CJK-Text (Chinesisch, Japanisch, Koreanisch). Andere Sprachen wie normal. word-break: keep-all
inherit Erbt den Wert explizit vom Elternelement. word-break: inherit

overflow-wrap

Wert Beschreibung Beispiel
normal Kein erzwungener Umbruch. Lange Wörter laufen über den Container hinaus. overflow-wrap: normal
anywhere Umbruch an beliebiger Stelle, wenn nötig. Beeinflusst auch min-content-Berechnung. overflow-wrap: anywhere
break-word Umbruch an beliebiger Stelle, aber nur als letzter Ausweg. Normaler Umbruch wird bevorzugt. overflow-wrap: break-word
inherit Erbt den Wert explizit vom Elternelement. overflow-wrap: inherit

Beispiele

4 Beispiele

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.

Lange URLs ohne und mit Umbruch
/* Sanfter Umbruch (empfohlen) */
.text { overflow-wrap: break-word; }

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

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

6 Fehler
01 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.
02 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.
03 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.
04 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.
05 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.
06 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

5 von 5

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

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

3 von 5

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.

  • Apple Mail

    Komplett

  • Gmail

    Komplett

  • Outlook

    Teilweise

    word-wrap: break-word funktioniert, overflow-wrap wird teilweise ignoriert

  • Thunderbird

    Komplett

  • Yahoo Mail

    Teilweise

    word-break: break-all funktioniert, overflow-wrap teilweise nicht

Newsletter

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

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.