<wbr>: Das Line Break Opportunity-Element

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 Einfluss auf die bidi-Anordnung hat: <div dir=rtl>123,<wbr>456</div> wird, wenn es nicht auf zwei Zeilen gebrochen wird, als 123,456 angezeigt und nicht als 456,123.

Aus demselben Grund führt das <wbr>-Element auch keinen Bindestrich an der Zeilenumbruchstelle ein. Um einen Bindestrich nur am Ende einer Zeile erscheinen zu lassen, verwenden Sie stattdessen das weiche Bindestrichzeichen-Entity (­).

Beispiele

Der Yahoo Style Guide empfiehlt, einen URL vor einem Satzzeichen zu brechen, um zu vermeiden, dass ein Satzzeichen am Ende der Zeile steht, das vom Leser als Ende der URL missverstanden werden 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