<wbr>: Das Wort-Trenner-Möglichkeit-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <wbr> HTML-Element stellt eine Wort-Trennungsmöglichkeit dar – eine Position innerhalb eines Textes, an der der Browser optional eine Zeile brechen kann, obwohl seine Zeilenbrechungsregeln normalerweise keinen Bruch an dieser Stelle erzeugen würden.

Probieren Sie es aus

<div id="example-paragraphs">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
  <p>Fernstraßen<wbr />bau<wbr />privat<wbr />finanzierungs<wbr />gesetz</p>
  <p>Fernstraßen&shy;bau&shy;privat&shy;finanzierungs&shy;gesetz</p>
</div>

#example-paragraphs {
  background-color: white;
  overflow: hidden;
  resize: horizontal;
  width: 9rem;
  border: 2px dashed #999;
}

Attribute

Dieses Element enthält nur die globalen Attribute.

Anmerkungen

Auf UTF-8-kodierten Seiten verhält sich <wbr> wie der U+200B ZERO-WIDTH SPACE Codepunkt. Insbesondere verhält es sich wie ein Unicode Bidi BN Codepunkt, was bedeutet, dass es keinen Effekt auf die Bidi-Anordnung hat: <div dir=rtl>123,<wbr>456</div> wird, wenn nicht auf zwei Zeilen gebrochen, als 123,456 und nicht als 456,123 angezeigt.

Aus demselben Grund fügt das <wbr>-Element keinen Bindestrich an der Zeilenbrechstelle hinzu. Um einen Bindestrich nur am Ende einer Zeile erscheinen zu lassen, verwenden Sie stattdessen das weiche Bindestrich-Zeichenentity ().

Beispiele

Der Yahoo Style Guide empfiehlt, eine URL vor einem Satzzeichen zu brechen, um zu vermeiden, dass ein Satzzeichen am Ende der Zeile stehen bleibt, das der Leser möglicherweise als Ende der URL missverstehen könnte.

html

<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien	Fließ-Inhalt, Satzinhalt.
Erlaubter Inhalt	Leer
Tag-Auslassung	Muss einen Start-Tag haben und darf keinen End-Tag haben.
Erlaubte Eltern	Jedes Element, das Satzinhalt akzeptiert.
Implizite ARIA-Rolle	Keine entsprechende Rolle
Erlaubte ARIA-Rollen	Jede
DOM-Schnittstelle	[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML # the-wbr-element