<wbr> HTML Zeilenumbruch-Gelegenheitselement

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 enthält nur die globalen Attribute.

Hinweise

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 es nicht auf zwei Zeilen umgebrochen wird, als 123,456 und nicht 456,123 angezeigt.

Aus dem gleichen Grund führt das <wbr>-Element an der Zeilenumbruchstelle keinen Bindestrich ein. Um einen Bindestrich nur am Ende einer Zeile erscheinen zu lassen, verwenden Sie stattdessen das Soft-Hyphen-Zeichen (­).

Beispiele

Der Yahoo Style Guide empfiehlt, eine URL vor einem Satzzeichen zu trennen, um zu vermeiden, dass ein Satzzeichen am Ende der Zeile bleibt, das der Leser fälschlicherweise für das Ende der URL halten könnte.

<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 <br> Element