<wbr>

Overview

The <wbr> element, or "word break opportunity," is a subtle hint to browsers where they might consider inserting a line break in long, unbroken strings of text. This element might be used when standard line-breaking rules do not provide the desired result.

Examples and Usage

Consider a situation where you have a long technical path or URL that you want to display within a layout with specific constraints, such as a sidebar or narrow column. Standard line-breaking rules might cause the text to break at inappropriate positions, hindering readability. The <wbr> element allows you to suggest appropriate breakpoints, giving you more control over how the text is presented.

<p>
  Path to the configuration file:
  /user/local<wbr>/config<wbr>/application<wbr>/version1<wbr>/settings<wbr>/production<wbr>/database<wbr>/connection
</p>

Here, we're using the element to indicate potential breakpoints within the path. If the text overflows its container, the browser may choose to break the line at one of the <wbr> elements, ensuring that the path remains readable.

You can visualize this effect by copying the code into an online code editor of your choice. Try resizing the window or the area where the text is displayed to observe how the path breaks at the specified <wbr> points.

While the <wbr> element does not introduce hyphenation at the breakpoints, it may still find application in unique cases, such as managing overflow in specific layout designs. However, it's important to recognize that modern web development often relies on other methods to handle line breaks, making the <wbr> element a less common choice.

Attribute Breakdown

The <wbr> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

The <wbr> element has no corresponding ARIA role, meaning it typically does not convey any semantic meaning to assistive technologies. While authors may specify the aria-hidden attribute, no other aria-* attributes are permitted.

Essentially, there are no specific accessibility concerns or considerations directly associated with the element.

Associated Elements

• <br>
• <hyphens>
• <overflow-wrap>
• <word-break>

Additional Notes

• The <wbr> element doesn't introduce a hyphen at the line breakpoint. If a hyphen is required, the soft hyphen character entity ­ should be used instead. A soft hyphen is an invisible marker used to specify a place in the text where a hyphenated break is allowed without forcing a line break in an inconvenient place.

• On UTF-8 encoded pages, <wbr> behaves like the U+200B ZERO-WIDTH SPACE code point. It does not affect the order of bidirectional (bidi) text, meaning that it doesn't change the way characters are displayed in languages that are read from right to left.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: wbr

The HTML Living Standard Specification: wbr