wbr HTML

HTML <wbr> Tag

To define a line break opportunity within an HTML document, the HTML <wbr> tag is used. A single long word, in general, can wrap or not wrap at all on a web page. Scrolling is thus needed to read a long complete word or sentence. But it is not the case with the use of the HTML <wbr> tag. It was introduced in HTML 5.

Difference between <wbr> and <br> tag:

The <wbr> tag represents a line break opportunity, i.e, break a line only if necessary. However, the <br> tag in HTML forces a line break.

To test the <wbr> tag:

A scroll bar gets enabled when too many characters is written without a wbr tag. However, with the wbr tag, it will break the line instead of enabling the scroll bar.

Example:

<!DOCTYPE html>
<html>
<body>
<p>Shrink the browser window, to see the effect.</p>
<p>pneumonoultra<wbr>microscopicsilico<wbr>volcanoconiosis<wbr>isaworldrecord<wbr>forthelargestword.</p>
</body>
</html>

Output 1:

Output 2:

Explanation:

In the above example, we have used the <wbr> tag to break along word at some specific places.

Global Attributes:

The HTML Global attributes are supported by the HTML <wbr> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <wbr> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share