<wbr> HTML-Element für Zeilenumbruch-Gelegenheit

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

<wbr> verhält sich wie der Codepunkt U+200B ZERO-WIDTH SPACE. 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 an, wenn es nicht auf zwei Zeilen gebrochen wird, 123,456 und nicht 456,123.

Aus demselben Grund führt das <wbr>-Element keinen Bindestrich an der Zeilenumbruchstelle ein. 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 zu trennen, um ein Satzzeichen am Ende der Zeile zu vermeiden, das der Leser möglicherweise für das Ende der URL hält.

<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