← Back to All Tags

<wbr>

Defines a word break opportunity (where text can break to a new line)

✨ HTML5

Definition and Usage

The <wbr> (Word Break Opportunity) element specifies where in a text it would be ok to add a line-break.

The <wbr> tag is a void element, meaning it has no closing tag and cannot contain any content.

When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.

Tip: The <wbr> tag suggests a line break opportunity but doesn't force it. The browser will only break the line at a <wbr> if necessary.
Note: Unlike <br>, which forces a line break, <wbr> only suggests where a break could occur if needed for wrapping.

Browser Support

The <wbr> tag is supported in all major browsers:

Chrome
Chrome
1.0+
Firefox
Firefox
1.0+
Safari
Safari
4.0+
Edge
Edge
12.0+
Opera
Opera
11.6+

Attributes

The <wbr> tag supports the Global Attributes in HTML.

The <wbr> tag also supports the Event Attributes in HTML.

Note: The <wbr> tag is a void/empty element and should be written as <wbr> or <wbr /> in XHTML.

Examples

Long URL with Word Break Opportunities

Break long URLs at appropriate points:

Example

<p>Visit our documentation at:<br>
https://<wbr>www.<wbr>example.<wbr>com/<wbr>documentation/<wbr>api/<wbr>reference/<wbr>index.html
</p>

Long Words

Add break opportunities in long compound words:

Example

<p>This is a very<wbr>long<wbr>word<wbr>without<wbr>spaces<wbr>that<wbr>needs<wbr>break<wbr>opportunities.</p>

File Paths

Break file paths at logical points:

Example

<p>The configuration file is located at:<br>
C:\<wbr>Program Files\<wbr>Company Name\<wbr>Application\<wbr>config\<wbr>settings.json
</p>

Email Addresses

Add break opportunities in long email addresses:

Example

<p>Contact us at: very<wbr>long<wbr>email<wbr>address<wbr>@<wbr>example<wbr>company<wbr>domain.com</p>

CamelCase Words

Break camelCase identifiers at word boundaries:

Example

<p>The function <code>get<wbr>Current<wbr>User<wbr>Authentication<wbr>Token()</code> returns the token.</p>

With CSS Word-Break

Combine <wbr> with CSS for better control:

Example

<style>
  .breakable {
    word-break: normal;
    overflow-wrap: break-word;
  }
</style>

<div class="breakable" style="width: 300px;">
  <p>https://<wbr>www.<wbr>verylongdomainname<wbr>example.<wbr>com/<wbr>path/<wbr>to/<wbr>resource</p>
</div>

Try it Yourself

Interactive Example

See how <wbr> works in a narrow container:

Without <wbr>:

https://www.verylongdomainname.com/documentation/api/reference/index.html

With <wbr>:

https://www.verylongdomainname.com/documentation/api/reference/index.html

Notice how the text breaks more naturally at the <wbr> positions in the second example.

<wbr> vs &shy; (Soft Hyphen)

Feature <wbr> &shy; (Soft Hyphen)
Break Indication Invisible break opportunity Adds hyphen (-) when breaking
Visual Effect No visible character Shows hyphen at break point
Best For URLs, file paths, code identifiers Long words in natural language
Example Usage example.com/<wbr>path extra&shy;ordinary
HTML Type Element (tag) Character entity
Rule of Thumb: Use <wbr> when you don't want a hyphen to appear (URLs, paths). Use &shy; for natural language words where a hyphen makes sense.

Common Use Cases

  • Long URLs: Break URLs at natural boundaries (slashes, dots)
  • File Paths: Allow paths to break at directory separators
  • Email Addresses: Break long email addresses without adding hyphens
  • Technical Terms: Break long technical identifiers (camelCase, snake_case)
  • Code Documentation: Break function/class names in narrow displays
  • Responsive Design: Improve text flow on mobile devices

Accessibility Considerations

  • Screen Readers: The <wbr> tag is typically ignored by screen readers
  • No Semantic Meaning: It only affects visual presentation, not content structure
  • Copy-Paste: When users copy text, <wbr> doesn't add extra characters
  • Search Engines: Search engines ignore <wbr> for indexing purposes

Best Practices

  • Use <wbr> for long unbreakable strings like URLs, paths, and identifiers
  • Place <wbr> at logical break points (slashes, dots, underscores)
  • Don't overuse <wbr> - only use where absolutely necessary
  • Combine with CSS overflow-wrap: break-word for better control
  • Test on narrow viewports to ensure proper text wrapping
  • Use &shy; instead for natural language words that should show hyphens
  • Remember that <wbr> is a suggestion, not a forced break
  • Consider using word-break: break-all CSS as an alternative for extreme cases

CSS Alternatives

In some cases, CSS properties can provide similar functionality:

CSS Word Breaking

/* Break at any character */
.break-all {
  word-break: break-all;
}

/* Break long words */
.break-word {
  overflow-wrap: break-word;
  word-wrap: break-word; /* Older browsers */
}

/* Hyphenate automatically (language-aware) */
.hyphenate {
  hyphens: auto;
}
Note: <wbr> gives you precise control over break points, while CSS properties apply rules automatically.

Default CSS Settings

The <wbr> element has no default CSS styling. It is completely invisible and only affects text flow.

Related Tags

  • <br>

    Defines a line break (forced)

  • <span>

    Defines inline section

  • <p>

    Defines a paragraph

  • <code>

    Defines computer code