<wbr>: Das Zeichen für Zeilenumbruch-Möglichkeit

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>-Element HTML stellt eine Wortumbruchmöglichkeit dar – eine Position innerhalb eines Textes, an der der Browser optional eine Zeile brechen kann, auch wenn seine Zeilenbruchregeln sonst an dieser Stelle keinen Zeilenumbruch 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-codierten 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 keine Auswirkungen auf die bidi-Anordnung hat: <div dir=rtl>123,<wbr>456</div> zeigt, wenn nicht in zwei Zeilen gebrochen, 123,456 und nicht 456,123.

Aus demselben Grund führt das <wbr>-Element nicht dazu, dass ein Bindestrich am Zeilenwechselpunkt eingefügt wird. Um einen Bindestrich nur am Ende einer Zeile erscheinen zu lassen, verwenden Sie stattdessen die weiche Bindestrich-Zeichenentität ().

Beispiele

Der Yahoo Style Guide empfiehlt, eine URL vor einem Satzzeichen abzubrechen, um zu vermeiden, dass ein Satzzeichen am Ende der Zeile bleibt, das der Leser möglicherweise fälschlicherweise als Ende der URL ansieht.

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, Phraseninhalt.
Erlaubter Inhalt	Leer
Weglassen des Tags	Muss ein Start-Tag haben und darf kein End-Tag haben.
Erlaubte Eltern	Jedes Element, das Phraseninhalt 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