<wbr>: The Line Break Opportunity element

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The<wbr>HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

Try it

<div>  <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;}

Attributes

This element only includes theglobal attributes.

Notes

On UTF-8 encoded pages,<wbr> behaves like theU+200B ZERO-WIDTH SPACE code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect onbidi-ordering:<div dir=rtl>123,<wbr>456</div> displays, when not broken on two lines,123,456 and not456,123.

For the same reason, the<wbr> element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity () instead.

Examples

The Yahoo Style Guide recommendsbreaking a URLbefore punctuation, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.

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>

Result

Technical summary

Content categories	Flow content,phrasing content.
Permitted content	Empty
Tag omission	Must have a start tag and must not have an end tag.
Permitted parents	Any element that acceptsphrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	`HTMLElement`