<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> 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.
<wbr> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.
<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.
<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.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.