Skip to main content

<wbr>: The Line Break Opportunity element

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.

{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}

Attributes​

This element only includes the global attributes.

Notes​

On UTF-8 encoded pages, <wbr> behaves like the U+200B ZERO-WIDTH SPACE code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on {{Glossary("bidi")}}-ordering: <div dir=rtl>123,<wbr>456</div> displays, when not broken on two lines, 123,456 and not 456,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 (&shy;) instead.

Examples​

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

<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​

{{EmbedLiveSample("Example")}}

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 accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface {{domxref("HTMLElement")}}

Specifications​

Browser compatibility​

See also​

  • {{cssxref("overflow-wrap")}}
  • {{cssxref("word-break")}}
  • {{cssxref("hyphens")}}
  • The {{HTMLElement("br")}} element