The <wbr> element in HTML is utilized to indicate where a line break can occur in an HTML document.
Without the wbr tag, reading lengthy single words or sentences becomes challenging. Lack of the wbr tag may result in a single long word either wrapping inappropriately or not wrapping at all, leading to layout issues on the page.
Without the <wbr> tag, individuals will need to horizontally scroll to view an entire lengthy word or sentence.
The <wbr> element is a recent addition to HTML 5.
The wbr tag doesn't break line.
Difference between <wbr> and <br> tag
The <br> tag enforces a line break, whereas the <wbr> tag simply indicates a potential line break. It allows the browser to break the line when needed, such as at the end of a page.
How to test <wbr> tag
To experiment with the HTML wbr element, attempt to input an excessive number of characters without the wbr tag. This action will trigger the appearance of a scroll bar on the screen. Conversely, if you exceed the character limit within the wbr tag, instead of a scroll bar, the line will break to accommodate the text.
HTML wbr tag example
<p> This is a world record for the largest word,
a 45-letter word appears in a major dictionary
<i>pneumonoultramicroscopicsilicovolcanoconiosis</i>
</p>
<p>Here's what it looks like without using the <code>wbr</code> tag...<br/>
<i> pneumonoultramicroscopicsilicovolcanoconiosis </i></p>
<p> It will look like this after using wbr tag. </p>
<i> pneu<wbr>monoultra<wbr>microsc<wbr>opicsili<wbr>covolcan<wbr>iosis</i>
Output:
This sets a record as the longest word globally, a 45-letter term found in a reputable dictionary - pneumonoultramicroscopicsilicovolcanoconiosis.
Here's an example without utilizing the ```
<p> This is a world record for the largest word,
a 45-letter word appears in a major dictionary
<i>pneumonoultramicroscopicsilicovolcanoconiosis</i>
<p>Here's what it looks like without using the <code>wbr</code> tag...<br/>
<i> pneumonoultramicroscopicsilicovolcanoconiosis </i></p>
<p> It will look like this after using wbr tag. </p>
<i> pneu<wbr>monoultra<wbr>microsc<wbr>opicsili<wbr>covolcan<wbr>iosis</i>
It will look like this after using wbr tag.
The <wbr> tag enables the utilization of both global and event attributes within HTML 5.
## Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
| --- | --- | --- | --- | --- | --- |
| `<wbr>` | Yes | Yes | Yes | Yes | Yes |