HTML <wbr> Tag: Optional Word Break Opportunities
The HTML <wbr> element marks a place where the browser may break a line if space becomes tight. It is useful inside long words, URLs, file paths, identifiers, or other strings that could otherwise overflow a narrow container.
<wbr> does not force a line break and does not insert a visible character. The browser uses the break opportunity only when needed.
Basic <wbr> syntax Top ↑
<p>verylong<wbr>identifier</p>Rendered output:
If the container is wide enough, the text stays on one line. If space is limited, the browser may wrap at the <wbr> position.
<wbr> is a void element. Write <wbr>, not <wbr>...</wbr>.Using <wbr> in a long URL Top ↑
Long URLs are a common use case. Add break opportunities at meaningful boundaries so the URL can wrap without changing what the user reads.
<p>
https://www.example.com<wbr>/products<wbr>/electronics<wbr>/item12345
</p>Rendered output:
The string itself is unchanged. The added elements only provide places where wrapping is allowed.
Breaking a long word at meaningful points Top ↑
You can also insert multiple optional break points inside a long word or generated identifier.
<p>customer<wbr>account<wbr>transaction<wbr>reference</p>This gives the browser several sensible places to wrap while keeping the visible text continuous when no break is required.
<wbr> vs <br> vs soft hyphen Top ↑
| Technique | What it does | Typical use |
|---|---|---|
<wbr> | Allows an optional line break | Long URLs, identifiers, or long unspaced strings |
<br> | Forces a line break | Line breaks that are part of the content, such as an address or poem |
­ | Creates a discretionary break where a hyphen can appear when the word wraps | Words where visible hyphenation is appropriate |
Unlike a soft hyphen, <wbr> does not display a hyphen when the line breaks.
When CSS is a better solution Top ↑
Use <wbr> when you know the meaningful places where a string may break. If the goal is simply to stop arbitrary long content from overflowing a layout, CSS is often easier to maintain.
.long-text {
overflow-wrap: anywhere;
}CSS can protect many pieces of unpredictable text at once, while <wbr> gives you explicit control over specific break opportunities.
Accessibility considerations Top ↑
The element changes where text may wrap visually; it should not be used to change the wording or meaning of the content. Keep the surrounding text understandable when it appears on one line or several lines.
For links, make the visible link text meaningful where possible instead of displaying a very long raw URL. If a raw URL is necessary, optional break opportunities can help prevent horizontal scrolling on small screens.
Common <wbr> mistakes Top ↑
- Expecting a forced break: use
<br>when a line break must always occur. - Expecting a hyphen:
<wbr>does not add one; consider­where discretionary hyphenation is appropriate. - Adding a closing tag:
<wbr>is empty and has no closing tag. - Inserting break points everywhere: use CSS when the problem is general overflow rather than a few known strings.
- Breaking at confusing positions: choose boundaries that keep URLs, identifiers, or compound strings easy to read.
Related HTML tutorials Top ↑
Continue with HTML whitespace and non-breaking spaces, the <pre> element, HTML hyperlinks, or return to HTML5 tags.
Frequently asked questions Top ↑
Does <wbr> always break the line? Top ↑
No. It only gives the browser permission to break at that position when wrapping is needed.
Does <wbr> add a hyphen? Top ↑
No. If you need a discretionary hyphen that can appear when a word wraps, use a soft hyphen where appropriate.
Can I use <wbr> inside a URL? Top ↑
Yes. It can be inserted at sensible boundaries in displayed URLs so they can wrap on narrow screens without changing the visible URL text.
Does <wbr> need a closing tag? Top ↑
No. It is a void element and contains no content.
Should I use <wbr> or CSS overflow-wrap? Top ↑
Use <wbr> for known, meaningful break opportunities. Use CSS such as overflow-wrap when you need general protection against unpredictable long content.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
