<wbr>
Das <wbr>-Element markiert eine Word Break Opportunity: eine Stelle, an der der Browser das Wort umbrechen darf, wenn der Platz nicht reicht. Im Gegensatz zu <br>, das immer einen Umbruch erzwingt, ist <wbr> nur ein Vorschlag. Wenn genug Platz da ist, passiert gar nichts. Wenn der Text aber zu lang für die Zeile wird, bricht der Browser genau dort um.
- Kategorie
- Text & Typografie
- Art
- Leeres Element
- Beispiele
- 3
- Browser
- 5 von 5
- 2 von 5
- Stand
- 04.02.2026
Grundlagen
Besonders im Deutschen gibt es extrem lange zusammengesetzte Wörter, die in schmalen Containern oder auf Mobilgeräten über den Rand hinausragen können. <wbr> gibt dir die Kontrolle darüber, wo der Browser umbrechen soll, ohne den Text im Normalfall zu verändern.
<wbr>ist ein Void-Element: Es hat keinen schließenden Tag und keinen Inhalt- Der Browser bricht nur um, wenn der Text nicht in die Zeile passt, sonst wird
<wbr>ignoriert - Im Gegensatz zu
­(Soft Hyphen) wird kein Trennstrich eingefügt <wbr>ist besonders nützlich für lange URLs, Dateipfade, Fachbegriffe und deutsche Komposita- Es hat keine semantische Bedeutung und beeinflusst nur das Layout
- Screenreader ignorieren
<wbr>komplett
Syntax
<p>Datenschutz<wbr>grundverordnung</p>Beispiele
3 BeispieleURLs können extrem lang werden und in schmalen Layouts überlaufen. Mit <wbr> gibst du dem Browser sinnvolle Umbruchstellen, zum Beispiel vor Schrägstrichen oder nach Punkten.
<p>
https://www.example.com/<wbr>
produkte/<wbr>
kategorie/<wbr>
unterkategorie/<wbr>
artikel-123
</p>Die deutsche Sprache liebt zusammengesetzte Wörter. In schmalen Containern oder auf Mobilgeräten können sie Layouts sprengen. <wbr> setzt unsichtbare Umbruchstellen.
<p>
Rindfleisch<wbr>
etikettierungs<wbr>
überwachungs<wbr>
aufgaben<wbr>
übertragungs<wbr>
gesetz
</p>Drei Möglichkeiten, Text umzubrechen (jede mit anderem Verhalten):
<!-- wbr: Optionaler Umbruch, kein Trennstrich -->
<p>Bundes<wbr>kanzleramt</p>
<!-- br: Erzwungener Umbruch (immer) -->
<p>Bundes<br>kanzleramt</p>
<!-- ­: Optionaler Umbruch mit Trennstrich -->
<p>Bundes­kanzleramt</p>Barrierefreiheit
<wbr> hat keine Auswirkung auf Screenreader. Es wird komplett ignoriert: Das Wort wird vorgelesen, als wäre <wbr> nicht da. Das ist gewünscht, denn <wbr> ist ein reines Layout-Element ohne semantische Bedeutung.
Achte darauf, dass <wbr> nicht in Wörter eingefügt wird, die dadurch für Screenreader-Nutzer bei einer manuellen Textsuche (Strg+F) nicht mehr gefunden werden könnten. In der Praxis ist das kein Problem, weil Browser <wbr> bei der Textsuche transparent behandeln.
Häufige Fehler
3 Fehler 01 <wbr> statt <br> verwenden (oder umgekehrt)
<wbr> ist ein optionaler Vorschlag, <br> ein harter Umbruch. Wenn du einen Zeilenumbruch erzwingen willst (z.B. in einer Adresse), brauchst du <br>. Wenn du nur die Möglichkeit zum Umbrechen geben willst, nimm <wbr>. 02 <wbr> mit schließendem Tag
<wbr> ist ein Void-Element. Es gibt kein </wbr>. Manche Browser tolerieren es, aber es ist ungültiges HTML. 03 Zu viele <wbr> auf engem Raum
<wbr> setzt, kann der Text bei schmaler Darstellung extrem zerklüftet umbrechen. Setze <wbr> nur an sinnvollen Stellen: zwischen Wortbestandteilen, nach Trennzeichen, vor Verzeichnis-Separatoren. Browser-Kompatibilität
5 von 5Das wbr-Element wird von allen modernen Browsern unterstützt. Es ist ein einfaches Layout-Element ohne komplexe Rendering-Anforderungen.
-
Chrome
Komplett
Seit Chrome 1
-
Firefox
Komplett
Seit Firefox 1
-
Safari
Komplett
Seit Safari 1
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
2 von 5Die Unterstützung von wbr in Email-Clients ist gemischt. Als Fallback kann ein Zero-Width-Space () verwendet werden.
-
Apple Mail
Komplett
wbr wird korrekt als optionale Umbruchstelle behandelt.
-
Gmail
Teilweise
Gmail entfernt wbr-Tags. Als Alternative einen Zero-Width-Space (​) verwenden.
-
Outlook
Keine
Outlook ignoriert wbr komplett. Für lange Wörter in E-Mails word-break: break-all als Inline-Style oder Zero-Width-Spaces verwenden.
-
Thunderbird
Komplett
-
Yahoo Mail
Teilweise
Inkonsistentes Verhalten. Zero-Width-Space als Fallback empfohlen.
Newsletter
einmal die Woche, kostenlosNeue 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