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.
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.