HTML Wbr Tag

HTML <wbr> tag is used to specify a line break opportunity within an HTML document.

Without wbr tag, it is very difficult to read a long single word or a sentence. Without wbr tag, single long word can wrap or not wrap at all, it creates problem for the layout of the page.

Without <wbr> tag, users will have to scroll right to read a long complete word or sentence.

The <wbr> tag is new and introduced in HTML 5.

The wbr tag doesn’t break line.

Difference between <wbr> and <br> tag

The <br> tag forces a line break while <wbr> tag only represents a line break opportunity. It only facilitate the browser to line break if necessary (for example at the end of page .

How to test <wbr> tag

To test HTML wbr tag, write too many characters without wbr tag, it will enable a scroll bar for you. But if you write too many characters within wbr tag, it will not enable a scroll bar but break the line.

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 is a world record for the largest word, a 45-letter word appears in a major dictionary pneumonoultramicroscopicsilicovolcanoconiosis

Here’s what it looks like without using the wbr tag…
pneumonoultramicroscopicsilicovolcanoconiosis

It will look like this after using wbr tag.pneumonoultramicroscopicsilicovolcaniosis

The <wbr> tag supports global and event attributes in HTML 5.

Supporting Browsers

Element	Chrome	IE	Firefox	Opera	Safari
<wbr>	Yes	Yes	Yes	Yes	Yes