<wbr> - optional line break point

The <wbr> tag in HTML is used to specify an optional line break point, allowing browsers to break the line at that location if needed. This tag is particularly useful for long words or URLs, ensuring content remains readable across different screen sizes.

Basic Usage of the <wbr> Tag

The <wbr> tag is an empty element and does not require a closing tag. Its purpose is to indicate to the browser that "a line break is allowed here, but not mandatory." When the container width is insufficient to display the full content, the browser will prioritize breaking the line at the <wbr> marker.

<p>This is a very very very very very very very long word: super<wbr>cali<wbr>fragi<wbr>listic<wbr>expiali<wbr>docious</p>

In this example, the browser will consider breaking the line at each <wbr> marker rather than allowing the overly long word to overflow the container or forcing a line break at an arbitrary position.

Differences from ­ and <br>

HTML provides several ways to handle line breaks, each with its own characteristics:

1. ­ (soft hyphen): Displays a hyphen only when a line break is needed.

   <p>super&shy;cali&shy;fragi&shy;listic&shy;expiali&shy;docious</p>
   

2. <br>: Forces a line break regardless of necessity.

   <p>First line<br>Second line</p>
   

3. <wbr>: Breaks the line only when needed, without adding any visible characters.

Practical Use Cases

Handling Long URLs

URLs often contain multiple segments without natural breakpoints. <wbr> can improve their display:

<a href="https://example.com/long/path/to/some/specific/resource">
  https://example.com/<wbr>long/<wbr>path/<wbr>to/<wbr>some/<wbr>specific/<wbr>resource
</a>

Displaying Technical Terms

Technical documentation frequently features compound terms:

<p>Learn<wbr>JavaScript<wbr>prototype<wbr>chain<wbr>inheritance<wbr>mechanism</p>
<p>Understand<wbr>CSS<wbr>flexbox<wbr>layout<wbr>model</p>

Long Content in Tables

<td>User<wbr>defined<wbr>configuration<wbr>options<wbr>collection</td>

Browser Compatibility Considerations

While modern browsers support <wbr>, older versions of IE may require a CSS alternative:

.wbr {
  display: inline-block;
}

<span class="wbr"></span>

Interaction with CSS white-space Property

The behavior of <wbr> is influenced by the CSS white-space property:

.nowrap {
  white-space: nowrap;
}

.pre-wrap {
  white-space: pre-wrap;
}

<p class="nowrap">This text will not wrap, even with <wbr> markers</p>
<p class="pre-wrap">This text preserves spaces and line breaks, and <wbr> markers will take effect</p>

Applications in Responsive Design

In responsive layouts, <wbr> can help content adapt to different viewports:

<h2>Latest<wbr>responsive<wbr>web<wbr>design<wbr>technology<wbr>trends</h2>

Handling Programming Language Identifiers

When displaying code, long variable or method names can use <wbr>:

<code>calculate<wbr>Total<wbr>Price<wbr>Including<wbr>Tax<wbr>And<wbr>Discounts</code>

Support for Multilingual Content

Different languages have varying line-breaking rules. <wbr> provides additional control:

<p>日本語の<wbr>長い<wbr>単語<wbr>や<wbr>フレーズ</p>
<p>중국어의<wbr>긴<wbr>문장<wbr>처리</p>

Performance Considerations

Excessive use of <wbr> may slightly impact rendering performance. It is recommended to use it only where truly necessary. For dynamically generated content, consider intelligently inserting <wbr> on the server side or via JavaScript:

function insertWbr(text) {
  return text.replace(/([\/_\-=&?]|\.)/g, '$1<wbr>');
}

Accessibility Notes

Screen readers typically ignore <wbr> tags and will not create pauses when reading aloud. For auditory breakpoints, appropriate punctuation or spaces should be used instead.

Interaction with JavaScript

<wbr> can be dynamically added or removed via DOM manipulation:

// Add wbr
element.innerHTML = element.innerHTML.replace(/\/g, '/<wbr>');

// Remove wbr
element.innerHTML = element.innerHTML.replace(/<wbr>/g, '');

Usage in HTML Emails

In HTML emails, support for <wbr> varies by client. A more reliable approach is to combine ­ with CSS:

<span style="display: inline-block;"></span>