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<­>hlij<­>kictvybnib<­>ebo[‘<­>revvvvvrg<­>bgyvnemc0<­>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