<wbr> Word break opportunity
A spot where the browser may break a long word if it has to.
<wbr> is a void element marking a point where the browser may break a line, and only if it needs to. When the line fits, nothing appears.
Very long words and URLs that could overflow a narrow screen are where it helps. <br> always forces a break; wbr never does. A soft hyphen (­) shows a hyphen when it breaks, and wbr does not.
The wbr element in the HTML Living Standard (opens in a new tab) explains that it adds a break opportunity without a hyphen. Soft hyphens are written as entities, which the Comments and Entities lesson covers.
Void element: it has no content and no closing tag.
Syntax
long<wbr>wordWhen to use it
<wbr> suggests break points in long strings without spaces: a URL in a printed reference list, a file path in a narrow sidebar, an email address on a business card page, a long German compound word in a headline, or a camelCase identifier in a narrow table column. Good break points are after slashes, dots, underscores or between word parts.
A soft hyphen (­) does the same but shows a hyphen at the break, which suits ordinary words. For many long strings, CSS is easier to maintain: overflow-wrap:anywhere breaks anywhere when needed, and hyphens:auto with a correct lang attribute hyphenates real words automatically. See the br element for a forced line break.
wbr works only in visible text. You cannot place it inside an href value or any other attribute, because there it would become part of the address. Put it in the link text only, and leave the href as one unbroken URL.
Live example
Edit the code and watch the preview.
<p style="width:120px;border:1px solid #ccc">www.<wbr>supercalifragilistic<wbr>expialidocious<wbr>.example</p>More examples
Long link text in a narrow box
A link shows its full address as text. wbr after each slash lets the text wrap inside the narrow box, while the href stays a single unbroken URL. On a wide screen nothing changes, because wbr only breaks when needed.
<p style="width:160px;border:1px solid #ccc;padding:8px">Source: <a href="https://example.com/recipes/breakfast/pancakes/classic">example.com/<wbr>recipes/<wbr>breakfast/<wbr>pancakes/<wbr>classic</a></p>wbr compared with a soft hyphen
Two narrow boxes hold the same long German word. The first uses wbr and breaks without a hyphen; the second uses ­ and shows a hyphen where the line breaks.
<p lang="de" style="width:120px;border:1px solid #ccc">Donau<wbr>dampf<wbr>schiff<wbr>fahrts<wbr>gesellschaft</p>
<p lang="de" style="width:120px;border:1px solid #ccc">Donau­dampf­schiff­fahrts­gesellschaft</p>Tip: Drop wbr into long URLs that might overflow on phones.
Browser support
wbr began as a non-standard element and was standardised in HTML5. All current browsers support it, while some old Internet Explorer versions ignored it. See the wbr support table (opens in a new tab) for version details. It is a void element, so it never has an end tag.
Accessibility
Screen readers say nothing for wbr, which is exactly right. Long URLs and words can wrap instead of forcing sideways scrolling on small screens, in line with the W3C note Understanding Reflow (opens in a new tab).
Common mistakes
Wrong
<wbr></wbr>Right
<wbr>wbr is void. Never write an end tag for it.
Frequently asked questions
What does wbr do in HTML?
It marks a word break opportunity, a place where the browser may wrap the line if needed, with no hyphen added. <wbr> is a void element. Long URLs, file paths and compound words that would otherwise overflow a narrow container are good candidates, for example www.example<wbr>.com/very<wbr>/long/path.
What is the difference between wbr and the soft hyphen?
The hyphen. Both allow a line break at a specific point, but the soft hyphen ­ shows a hyphen at the end of the line when the break happens, and <wbr> does not. For long text in general, CSS overflow-wrap:anywhere or hyphens:auto may be simpler than marking each break by hand. Wikipedia's article on the soft hyphen (opens in a new tab) goes into the detail.