Verhindern Sie, dass Überschriften an der falschen Stelle umbrechen

Eine Überschrift, die nach einem kurzen Wort umbricht, ein einzelnes Wort, das allein auf der letzten Zeile steht, und eine lange URL, die ihren Container verbreitert – das sind drei unterschiedliche Defekte, und jeder erfordert in der Regel eine andere CSS- oder HTML-Lösung.

Sie haben allerdings eine ärgerliche Gemeinsamkeit: Sie treten nur bei bestimmten Containerbreiten auf. Der Designer macht einen Screenshot der kaputten Überschrift auf einem 384px breiten Smartphone, Sie öffnen die Seite in Ihrer Desktop-Breite – und alles sieht gut aus. Schlechte Umbrüche leben meist in schmalen Viewport-Bändern, die niemand getestet hat. Deshalb ist es oft der schnellste Weg zum Defekt, Session Replays in genau den Breiten anzusehen, mit denen echte Nutzer gesurft haben.

Dieser Artikel geht jedes sichtbare Problem durch, zeigt das passende Werkzeug und die Überlegung, die Ihnen beim nächsten Mal hilft, das richtige auszuwählen.

Wie verbietet man einen Umbruch an einer bestimmten Stelle?

Um den Browser daran zu hindern, eine Zeile an einer bestimmten Stelle umzubrechen, tauschen Sie das umbruchfähige Zeichen gegen sein geschütztes Gegenstück. Ein geschütztes Leerzeichen ( , U+00A0) hält zwei Wörter in derselben Zeile, indem es das gewöhnliche Leerzeichen zwischen ihnen durch eines ersetzt, an dem der Browser nicht umbrechen darf. Das ist die Lösung für eine Überschrift, die direkt nach „der” umbricht oder einen Produktnamen über zwei Zeilen verteilt.

Text kann auch dort umbrechen, wo kein Leerzeichen steht, am häufigsten nach einem Bindestrich. Der Word Joiner (U+2060, geschrieben als die case-sensitive benannte Referenz ⁠) verbietet einen Umbruch, ohne Breite hinzuzufügen, und der geschützte Bindestrich (U+2011, ‑, für den es keine benannte Entität gibt) stellt einen Bindestrich dar, der nicht zum Umbruchpunkt werden kann:

<h2>Shipping the new editor to&nbsp;everyone</h2>
<p>Take the exit for I&#8209;95 north.</p>

Wie erlaubt man einen Umbruch an einer bestimmten Stelle?

Das Spiegelbild dieses Problems ist eine lange Zeichenkette, die Sie umbrechen wollen, aber nur an selbst gewählten Stellen. Ein eingefügtes <wbr>-Element bietet dem Browser eine zusätzliche Stelle, an der er eine Zeile beenden darf, und es wird nichts Sichtbares eingefügt, wenn der Umbruch genutzt wird. Das weiche Trennzeichen ­ (U+00AD) markiert dieselbe Art von Gelegenheit, stellt aber einen Bindestrich dar, wenn der Umbruch genutzt wird; bis dahin ist es unsichtbar. Es funktioniert unter dem Standardwert hyphens: manual und versagt daher nur, wenn irgendwo hyphens: none gesetzt wurde.

<p>https://docs.example.com<wbr>/reference<wbr>/text-wrapping</p>
<p>The rise of hyper&shy;modularization</p>

Verwenden Sie <wbr> für angezeigte URLs und Bezeichner, ­ für echte Wörter.

Lange, nicht umbrechbare Zeichenketten: overflow-wrap: anywhere

Für benutzergenerierte Inhalte, lange URLs und Tokens, die Sie nicht von Hand annotieren können, setzen Sie overflow-wrap: anywhere und lassen den Browser als letzten Ausweg umbrechen. Das entscheidende Detail ist die intrinsische Größenberechnung. Beide Werte erlauben dem Browser, ein langes Wort aufzuteilen, aber nur bei anywhere zählen diese Notfall-Umbruchpunkte in die min-content-Breite des Elements hinein; break-word belässt diese Breite bei der Länge der gesamten ungebrochenen Zeichenkette. Deshalb kann ein Flex-Item, das eine lange URL enthält, unter break-word weiterhin das Schrumpfen verweigern und das Layout sprengen, während es unter anywhere korrekt schrumpft. CSS Text Level 4 definiert die beiden Werte abgesehen von diesem einen Unterschied identisch – und genau dieser Unterschied ist es, auf den man in der Praxis stößt.

.card { display: flex; gap: 1rem; }
.card-body {
  /* break-word leaves min-content at the full URL width */
  overflow-wrap: anywhere;
}

Der Wert anywhere funktioniert in allen modernen Engines; Safari war mit Version 15.4 (März 2022) der letzte Browser, der ihn ausgeliefert hat. Ältere Codebasen enthalten mitunter noch das veraltete word-break: break-word, das im Ergebnis genauso umbricht wie overflow-wrap: anywhere, während word-break selbst bei seinem normalen Verhalten bleibt. Ersetzen Sie es.

Wo gehört word-break: break-all hin?

word-break: break-all setzt den Umbruch genau dort, wo der Platz in der Zeile ausgeht – auch mitten im Wort. Es fügt keinen Bindestrich hinzu und verschiebt kein ganzes Wort in die nächste Zeile, um es intakt zu halten, sodass gewöhnlicher Fließtext an jedem Zeilenende zerhackt wird. Damit ist es das falsche Werkzeug für Fließtext und das richtige für Zeichenketten, bei denen Wortgrenzen keine Bedeutung tragen: Commit-Hashes, API-Schlüssel, Tokens in Tabellenzellen. Der Wert keep-all bedient das gegenteilige CJK-Bedürfnis und unterdrückt Umbrüche zwischen Zeichen.

.commit-hash {
  font-family: monospace;
  word-break: break-all; /* never on prose */
}

Schmale Spalten: hyphens: auto plus ein lang-Attribut

Wo eine schmale Spalte Umbrüche mitten im Wort erzwingt, liest sich eine lexikalisch korrekte Trennstelle deutlich besser als ein Holzhammer-Schnitt. hyphens: auto bewirkt nichts, solange das Element oder einer seiner Vorfahren kein lang-Attribut trägt. Jede Sprache trennt Wörter auf ihre eigene Weise, also muss der Browser wissen, welche er nachschlagen soll, bevor er trennen kann. Die Eigenschaft ist Baseline „Widely available” und funktioniert seit September 2023 browserübergreifend ohne Präfix.

<aside lang="en" class="sidebar-note">Uncharacteristically long words wrap cleanly here.</aside>

.sidebar-note { hyphens: auto; }

Überschriften und Absätze: text-wrap balance und pretty

Bei einem einzelnen Wort auf der letzten Zeile einer Überschrift gleicht text-wrap: balance die Zeilenlängen an, indem es unter den bereits vorhandenen Umbruchpunkten der Zeile anders auswählt; es erzeugt keine neuen und ändert die Boxgröße des Elements nicht, sodass eine ausbalancierte Überschrift ihre ursprüngliche Breite behält. Das Ausbalancieren ist rechenintensiv, deshalb begrenzen es die Browser: Chromium hört bei sechs Zeilen auf, Firefox bei zehn; längere Blöcke brechen normal um. text-wrap: pretty zielt auf Fließtext und investiert mehr Layout-Aufwand, um Schusterjungen zu vermeiden; es wird in Chromium und in Safari unterstützt, das es in Version 26 ausgeliefert hat, in Firefox jedoch noch nicht. Die Eigenschaft text-wrap selbst funktioniert seit März 2024 in allen aktuellen Browsern.

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

Referenz: Problem und passendes Werkzeug

Das Muster hinter dem gesamten Werkzeugkasten: Bestimmen Sie, ob der Defekt einen verbotenen Umbruch, einen erlaubten Umbruch oder eine grundlegende Umbruchstrategie erfordert, und wenden Sie dann das engste Werkzeug an, das ihn behebt. Eine sinnvolle Grundlage ist overflow-wrap: anywhere auf Containern mit Benutzerinhalten, balance auf Überschriften und pretty auf Absätzen; die zeichenweisen Entitäten heben Sie sich für die einzelnen Umbrüche auf, die ein Designer danach beanstandet.

FAQs

Was ist der Unterschied zwischen overflow-wrap und word-break?

overflow-wrap greift nur ein, wenn ein Wort zu lang ist, um allein in eine Zeile zu passen; alles andere bricht wie gewohnt um. word-break: break-all ändert die Strategie für das gesamte Element und teilt ein Wort überall dort, wo der Platz in der Zeile ausgeht. Verwenden Sie overflow-wrap: anywhere für gelegentliche lange URLs innerhalb von normalem Fließtext und word-break: break-all ausschließlich für Hashes und Tokens, bei denen Wortgrenzen keine Bedeutung tragen.

Ist word-wrap dasselbe wie overflow-wrap?

Ja. Die Eigenschaft startete als Microsoft-Erweiterung namens word-wrap, erhielt später den Standardnamen overflow-wrap, und Browser akzeptieren den alten Namen weiterhin als Alias für den neuen. Schreiben Sie in neuem Code overflow-wrap; aktuelle Browser benötigen word-wrap nicht als Fallback, und Stylesheets, die beides deklarieren, setzen lediglich dieselbe Eigenschaft zweimal.

Wann sollte ich ein Zero-Width Space statt des wbr-Elements verwenden?

Verwenden Sie das Zero-Width Space (U+200B, geschrieben als Referenz ​), wenn Sie nur die Zeichenkette selbst ändern können, etwa bei Inhalten aus einem CMS oder aus einer API-Antwort, und das wbr-Element, wenn Sie das HTML kontrollieren. Das Zero-Width Space ist ein unsichtbares Zeichen, das im Text verbleibt, also beim Kopieren und Einfügen mitwandert und die exakte Suche stören kann.

Was passiert in Browsern, die text-wrap: pretty nicht unterstützen?

Die Deklaration wird schlicht ignoriert, und der Text bricht mit dem standardmäßigen zeilenweisen Algorithmus um, es geht also visuell nichts kaputt. CSS verwirft Deklarationen mit Werten, die es nicht kennt, was text-wrap: pretty und text-wrap: balance zu sicheren Progressive Enhancements macht: Unterstützende Browser erhalten bessere Zeilenumbrüche, alles andere wird genau wie zuvor dargestellt. Weder eine Feature Query noch eine Fallback-Deklaration ist nötig.