wbr
The HTML <wbr> element marks an optional line-break opportunity. It helps long words, URLs, and identifiers fit narrow screens without inserting a visible space or a forced break.
What you will learn
- What line-break opportunity
wbrrepresents - How to use it in long URLs and identifiers
- How it differs from ordinary spaces and CSS wrapping
Basic example
<p class="url">https://example.com/products/<wbr>very-long-product-name</p>The browser may break the line at wbr if the text needs more room. If there is enough space, no break appears and no whitespace is added.
wbr does not add a space
An ordinary space separates words and can affect copy-and-paste or text processing. wbr is only a possible visual break; it does not change the text into two words.
<code>veryLong<wbr>IdentifierName</code>Use CSS as the larger strategy
Responsive layout should normally use CSS properties such as overflow-wrap and sensible container sizing. Use wbr when a particular long token has a natural, safe place where a line may break.
Do not insert wbr at arbitrary points in a URL or identifier if breaking there would make the value hard to read or copy. Test the result with zoom and narrow viewports.
Common mistakes
- Expecting
wbrto force a break in every browser or width. - Using visible text such as a hyphen when the value must remain unchanged.
- Adding it everywhere instead of fixing the container’s responsive CSS.
- Placing a break inside a value where it makes reading or copying ambiguous.