<wbr>: The Word 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.
| Content categories | Flow content, phrasing content. | 
|---|---|
| Permitted content | Empty | 
| Tag omission | It is an empty element; it must have a start tag, but 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 | HTMLElement | 
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 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 (­) instead.
This element was first implemented in Internet Explorer 5.5 and was officially defined in HTML5.
Example
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>
Specifications
| Specification | 
|---|
| HTML Standard (HTML) # the-wbr-element | 
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
| wbr | 1 | 79 | 1 | 5.5-7 | 11.6 | 4 | Yes | Yes | 4 | ? | ? | Yes | 
See also
- overflow-wrap
- word-break
- hyphens
- The <br>element
    © 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr