HTML <wbr> Tag

The <wbr> tag, short for Word Break Opportunity, specifies a position within a text where the browser may optionally break a line if needed. It's useful when dealing with long words or strings that might otherwise overflow their container. Unlike a <br> tag which forces a line break, <wbr> only suggests a break point, which the browser uses at its discretion.

HTML <wbr> Tag: Controlling Word Breaks in Text

Syntax

<wbr>

The <wbr> tag does not have any attributes and it doesn't have a closing tag.

Attributes

Attribute Value Description
None None The <wbr> tag does not have any attributes.

Example

<p>ThisIsAReallyLongWordThatMightCauseAnOverflow<wbr>IfItDoesntFitOnOneLine</p>

In the above example, if the phrase "ThisIsAReallyLongWordThatMightCauseAnOverflowIfItDoesntFitOnOneLine" does not fit on one line, the browser may break the line at the <wbr> tag.

More Examples

Example 1: Handling Long URLs

Long URLs can often disrupt a layout. Using <wbr> can help make them more manageable.

<p>Visit our site: https://www.exampleverylongdomainnamefor<wbr>demonstrationpurposesonly.com/some<wbr>verylongpath<wbr>thatdoesnot<wbr>fitononesingleline</p>

This makes the URL more readable even when the space is constrained, breaking at specific locations if the layout demands.

Example 2: Breaking Complex File Names

Long file names can be as problematic as URLs. Here's how to handle them:

<p>The file name is: a_very_long_file_name_with_underscores<wbr>and_more_underscores<wbr>to_make_it_even_longer.txt</p>

Example 3: Breaking Long Text Within Table Cells

When long text is placed inside table cells, it can break the layout of the table. The <wbr> can help to avoid this.

<table>
  <tr>
    <td>Thisisalongtextstringthatshouldwraparound<wbr>ifitdoesnotfit<wbr>onthe<wbr>tablecell.</td>
  </tr>
</table>

Example 4: Improving Code Presentation

When you are showcasing code within your website, long code lines may cause the design to go out of the viewport. The <wbr> tag can improve the rendering of code in such cases.

<pre>
  <code>
    // This is a very long code line that needs to wrap around
    const someVeryLongVariableName = aVeryLongFunctionCallThatDoesnt<wbr>fitInOneLineAndBreaksTheLayout();
  </code>
</pre>

Browser Support

The <wbr> tag is supported by all modern browsers:

Browser Version
Chrome 1+
Edge 12+
Firefox 1+
Safari 1+
Opera 7+

Notes and Tips

  • Discretionary: Browsers are not required to break the line at a <wbr> tag. They will only break it if needed for layout purposes.
  • Not a forced break: Use <br> for forced line breaks. <wbr> is only a potential break point.
  • Readability: Use <wbr> to improve the readability of text within a container, preventing awkward overflows.
  • Avoid overuse: Too many <wbr> tags can make text look fragmented. Use them judiciously.
  • Responsive Design: The <wbr> tag is particularly useful for responsive designs where text may need to reflow based on screen size.
  • Dynamic Content: When working with dynamically generated content where word length can vary, <wbr> tags can make sure the design does not break in unexpected ways.
  • Accessibility: <wbr> tags do not negatively affect screen readers and do not alter the meaning of the content.

By using the <wbr> tag effectively, you can enhance the text layout of your webpage and make it more adaptable across different devices and screen sizes.