The <wbr> Element
As defined in the HTML Living Standard, the <wbr> element represents a line break opportunity. It is a void element that tells the browser: "If you need to break this line because it is too long, you can do so here."
(The URL above wraps only at the <wbr> points to fit the dashed box.)
<p>
The super<wbr>cali<wbr>fragi<wbr>listic<wbr>expiali<wbr>docious
word can now wrap safely.
</p>
View HTML Living Standard: The wbr element
Reflow and Responsiveness
The <wbr> element is a silent hero of responsive typography. It is particularly useful for:
- Long URLs: Breaking addresses so they don't push the page width out.
- Technical Strings: Handling long file paths or chemical formulas.
- Complex Compound Words: Managing breaks in languages like German or technical English.
WCAG Requirement: Reflow
Success Criterion 1.4.10 (Level AA): Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions...
Horizontal scrolling is one of the most common accessibility barriers on mobile devices. If a long, unbreakable string of text forces the page to become wider than the screen, it violates this criterion. By using <wbr>, you ensure that even long data strings can reflow within a narrow viewport, keeping the content accessible to everyone.
WBR vs. Soft Hyphen (­)
It is important to understand the visual difference between these two methods of breaking lines:
<wbr>: Breaks the line without adding a hyphen character. Best for URLs and code.­: Breaks the line and adds a hyphen at the point of the break. Best for long words in prose.
<!-- No hyphen on wrap -->
<p>file<wbr>path<wbr>example.txt</p>
<!-- Hyphen added on wrap -->
<p>multi­dimensional</p>
A11y Tip: Screen Reader Silence
The <wbr> element is completely invisible to screen readers and does not change the pronunciation or announcement of the word. It is purely a layout hint for the browser's rendering engine.