Html Wbr Tag

The Line Break Opportunity element

A word break opportunity is a place in text from where the browser breaks a line. This opportunity is represented by the element wbr in the HTML document.

Syntax:

<body>
<div id="#">
………………
<wbr>……………… <wbr>
………………
</div>
</body>

HTML:

<!DOCTYPE html>
<html>
<head>
<title>HTML video tag </title>
</head>
<body>
<div id="example-paragraphs">
<p>zsxdcfvyguhlijkictvybnibebo[‘revvvvvrgbgyvnemc08rbvn</p>
<p>zsxdcfvyguhlij<wbr>kictvybnib<wbr>ebo[‘<wbr>revvvvvrgbgyvnem<wbr>c08rbvn</p>
<p>zsxdcfvygu<&shy>hlij<&shy>kictvybnib<&shy>ebo[‘<&shy>revvvvvrg<&shy>bgyvnemc0<&shy>8rbvn</p>
</div>
</body>
</html>

CSS:

.output {
background-color: gray;
}


#example-paragraphs {
background-color: white;
overflow: hidden;
resize: horizontal;
width: 9rem;
}

Output:

Attributes

This HTML tagonly contains the general attributes.

On pages with UTF-8 encoding, this tag serves as the U+200B ZERO-WIDTH SPACE code point.

This element was initially used in Internet Explorer 5.5 even though it was officially specified in HTML5.

Example

The following code explains how to use WBR code in HTML:

HTML:

<p>
http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages 
</p>

Output:

Browser support:

List of browsers that support wbr tag in HTML are mentioned below:

Chrome:Yes

Microsoft Edge:Yes, version 12 needed

Firefox:Yes, version 1 needed

Safari:Yes

Opera:Yes