HTML-Element <wbr> für optionale Zeilenumbrüche

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 #999999;
}

Attribute

Dieses Element unterstützt nur die globalen Attribute.

Hinweise

<wbr> verhält sich wie der Codepunkt U+200B ZERO-WIDTH SPACE. Insbesondere verhält es sich wie ein Unicode-Bidi-Codepunkt der Klasse BN. Das bedeutet, dass es keinen Einfluss auf die Bidi-Reihenfolge hat: Wenn <div dir=rtl>123,<wbr>456</div> nicht auf zwei Zeilen umgebrochen wird, erscheint 123,456 und nicht 456,123.

Aus demselben Grund fügt das Element <wbr> an der Umbruchstelle keinen Bindestrich ein. Wenn ein Bindestrich nur am Zeilenende erscheinen soll, verwenden Sie stattdessen die Zeichenentität für einen bedingten Trennstrich (­).

Beispiele

The Yahoo Style Guide empfiehlt, eine URL vor einem Satzzeichen umzubrechen, damit am Zeilenende kein Satzzeichen steht, das Leser für das Ende der URL halten könnten.

<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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• overflow-wrap
• word-break
• hyphens
• Das Element <br>