Path // www.yourhtmlsource.com → Reference → <wbr>

<wbr>

by Ross Shannon

The <wbr> element represents a word break opportunity—a position within text where the browser may optionally break a line, even though its line-breaking rules would not normally create a break at that location. This is particularly useful for long strings like URLs, file paths, or technical terms that might overflow their containers. Unlike <br>, <wbr> only breaks the line if necessary.

Clock This page was last updated on 2025-11-17


Syntax

<p>https://www.example<wbr>.com/very/long/<wbr>path/to/resource</p>

The element is a void element (self-closing) and does not require a closing tag. It inserts a potential line break point without adding any visible character or space. The browser will only break the line at a <wbr> position if the content would otherwise overflow its container.

Attributes

  • Global attributes - The <wbr> element supports all global attributes such as id, class, style, lang, and dir.

The <wbr> element has no element-specific attributes. Its function is purely to indicate a break opportunity within the text flow.

Examples

Breaking Long URLs

<p>Visit our documentation at
https://docs.example<wbr>.com/api/<wbr>v2/endpoints/<wbr>authentication</p>

Technical Terms

<p>The function name is
<code>calculate<wbr>Maximum<wbr>Viewport<wbr>Dimensions</code>.</p>

File Paths

<p>The configuration file is located at
<code>/usr/local/<wbr>etc/<wbr>nginx/<wbr>sites-available/<wbr>default.conf</code></p>

When to Use

Use the <wbr> element when:

  • Displaying long URLs that might overflow narrow containers
  • Showing file paths in documentation
  • Breaking up long compound words or technical terms
  • Formatting email addresses in tight spaces
  • Preventing horizontal scrolling on mobile devices
  • Improving readability of long strings without spaces

Key differences from other elements:

  • <wbr> vs <br>: <br> always creates a line break; <wbr> only breaks if needed
  • <wbr> vs soft hyphen (&shy;): Soft hyphen adds a visible hyphen when breaking; <wbr> adds nothing
  • <wbr> vs CSS word-break: <wbr> gives precise control over break points

Important considerations:

  • Does not add any visible character when line breaks
  • Works well for languages without spaces between words
  • Useful for responsive design when content width varies
  • Should be placed at logical break points (after punctuation, between compound parts)
  • <br> - Forced line break
  • <span> - Generic inline container
  • <code> - Code content that often needs break control
  • <pre> - Preformatted text with preserved whitespace