<wbr>

Zuletzt aktualisiert am 4. Februar 2026

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.

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 — es beeinflusst nur das Layout
• Screenreader ignorieren <wbr> komplett

Syntax

<p>Datenschutz<wbr>grundverordnung</p>

Beispiele

Lange URL in einem schmalen Container

URLs 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>

Deutsches Kompositum

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>

Vergleich: wbr vs. br vs. &shy;

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>

<!-- &shy;: Optionaler Umbruch mit Trennstrich -->
<p>Bundes&shy;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

<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>.

<wbr> mit schließendem Tag: <wbr> ist ein Void-Element. Es gibt kein </wbr>. Manche Browser tolerieren es, aber es ist ungültiges HTML.

Zu viele <wbr> auf engem Raum: Wenn du nach jedem zweiten Zeichen ein <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

Das wbr-Element wird von allen modernen Browsern unterstützt. Es ist ein einfaches Layout-Element ohne komplexe Rendering-Anforderungen.

Email-Kompatibilität

Die Unterstützung von wbr in Email-Clients ist gemischt. Als Fallback kann ein Zero-Width-Space (​) verwendet werden.

Verwandte Elemente