CSS overflow-wrap – sauberer Zeilenumbruch für lange Wörter

Mar 2026

Im Fließtext verhindert die Silbentrennung durch einen automatischen Zeilenumbruch, dass Komposita (überlange zusammengesetzte Wörter) den umgebenden Block aus dem Rahmen schieben. overflow-wrap (früher word-wrap) erzwingt das Umbrechen langer Zeichenfolgen wie URLs an beliebiger Stelle auf eine neue Zeile.

Automatische Silbentrennung im Fließtext

Damit das Layout nicht aus dem Ruder läuft: Die automatische Silbentrennung schützt das Layout durch eine automatische Trennung bei Bindestrichen. Nur die Sprache der Webseite muss notiert sein, damit die Trennung zuverlässig greift. Für den Fließtext ist das heute der Standard:

<html lang="de">

hyphens: auto;

/** Wörter mit 5 und mehr Buchstaben trennen **/
hyphenate-limit-chars: auto 5;

/** maximal zwei Trennungen in Folge **/
hyphenate-limit-lines: 2;

Wenn die Zeilen lang genug sind, kommt der Flattersatz auch recht gut mit moderaten Wortlängen zurecht.

CSS overflow-wrap: Trennen ohne Trennstrich

Bei schmalen Spalten und auf den kleinen Monitoren mobiler Geräte hilft die Trennung bei Leerzeichen, Bindestrichen und Satzzeichen nicht unbedingt. Typisches Beispiel ist eine URL, die in den Text kopiert wird:

https://www.bmuv.de/pressemitteilung/bundesumweltministerium-stellt-foerderprogramm-zur-klimaanpassung-in-sozialen-einrichtungen-und-kommunalen-infrastrukturen-vor

Die automatische Silbentrennung darf hier zwar bei den Trennstrichen trennen, aber in einer URL darf »bundesumweltministerium« nicht mit einem Trennstrich getrennt werden, weil die URL damit verfälscht würde. <wbr> trennt ohne Trennstrich im Fall eines Falles, aber <wbr>-Tags müssten manuell eingesetzt werden. Automatisch und ohne Trennstrich, nicht nach Silben und nicht nach Wortbestandteilen wirkt overflow-wrap.

overflow-wrap: break-word;

normal
break-word: lange Wörter am rechten Ende des Blocks umbrechen
break-all: jedes Wort auf eine neue Zeile umbrechen
keep-all: Chinesisch, Japanisch und Koreanisch wird nicht umgebrochen

Firefox, Safari, Chrome oder Opera – jeder Browser fügt den Zeilenumbruch bei break-word individuell ein. Firefox trennt alles, was den Rand des Block erreicht. Safari trennt nur die Wörter, die breiter als der umfassende Block sind.

Bei URLs wirkt overflow-wrap:anywhere oft deutlich besser als break-word, weil die Browser sonst manchmal erst viel zu spät umbrechen.

overflow-wrap für pre-Tags

Text innerhalb von pre-Tags wird nie automatisch umgebrochen. Wenn der Text zu lang wird, bricht das Layout und auf schmalen Monitoren erscheint eine horizontale Scrollleiste.

document.querySelector("#b1").addEventListener ("click", function (evt){
   b1.classList.toggle ("red");
});

Wenn Elemente zu breit für den Viewport mobiler Geräte und für das Browserfenster werden, lässt sich die Seite nach rechts scrollen und schwimmt.

overflow-wrap ist eine Möglichkeit, sicher zu stellen, dass lange Texte in pre-Tags nicht überlaufen. Alternativen: Wenn die Gefahr besteht, dass lange Texte oder breite Bilder ihren Block überschreiten, eine maximale Breite angeben und den Überlauf mit CSS overflow / text-overflow scrollen

word-break

Im Grunde genommen gibt word-break genauso wie overflow-wrap an, ob lange Wörter umgebrochen werden dürfen. word-break: break-all richtet sich allerdings an das besondere Verhalten von chinesischem, japanischen und Koreanischen Text. In deutschen oder englischen Texten ist das Ergebnis fast immer falsch.

Februar

.vertical {
   word-break: break-all;
   width:1em; 
   font-size: 2em; 
   text-transform: uppercase; 
   font-family:courier; // Alternative zu Großbuchstaben
   margin:1em auto;
}

Funktioniert nur bei monoserif-Schriften oder Versalien (Großbuchstaben).

Es bleibt dabei: word-break ist für chinesischen, japanischen und koreanischen Text, für westliche Sprachen fast immer falsch. Wenn lange Wörter oder URLs umbrechen sollen, ohne den normalen Text schwer lesbar zu machen, ist overflow-wrap der richtige Ansatz.