<wbr>
A spot where the browser may break a long word or string of characters when the line runs out of room.
- Display
- inline
- Closing tag
- None, void element
- Permitted content
- None, the element is void
Example
#<div class="stage" style="max-width: 200px;">
<p>Without wbr: <code>calculateTotalPriceWithDiscount()</code></p>
<p>With wbr: <code>calculate<wbr>Total<wbr>Price<wbr>With<wbr>Discount()</code></p>
</div>The first name has nowhere to break, so it sticks out past the frame. The second one breaks at the spots marked by <wbr>.
Definition and usage
#The <wbr> element (from word break opportunity) marks a spot where the browser may break the line if there isn’t enough room. When there’s enough space, nothing happens. It also doesn’t add a hyphen or any other character.
It’s useful for long strings with no spaces: camelCase function names, file paths, URLs, or identifiers that would otherwise stick out past the container on a narrow screen.
Related solutions work a bit differently. The ­ entity (a soft hyphen) breaks a word and adds a hyphen at the break point. In CSS, overflow-wrap: anywhere automatically breaks long strings anywhere, and hyphens: auto splits words according to the rules of the language. <wbr>, on the other hand, gives you full control over exactly where the break happens.
Syntax
#very<wbr>Long<wbr>NameAttributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- If a hyphen should appear at the break point, use
­instead of<wbr>. - For content you don’t control, e.g. user comments, CSS
overflow-wrap: anywhereworks better. - In URLs, insert
<wbr>after slashes, so the break falls in a natural place.
Related entries
#- <br>A line break at the point it’s inserted, without starting a new paragraph.
- <code>A piece of computer code: the name of a variable, function, tag, or file, as well as a short listing.
- <pre>Preformatted text: it preserves spaces, tabs, and line breaks exactly as they appear in the code.
- <span>A generic inline container with no meaning, for styling a piece of text.
Spotted a mistake or missing an example? Write to us.