htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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