A wbr tag is used for word break opportunity when the browser finds it required to display.
A word break opportunity is the best way to wrap your text. The text automatically reaches to the new line when the browser finds it required for the wrapping. Place wbr tag to in the location where you want to wrap the text to fit the container. A container is a box to place the content of HTML.
When the paragraph is too long to fit the container (like HTML div tag) , it requires wrapping in that case. A wrapping text displays inside the container. If the text size is increased from the line, the overflow text is placed in the next line.
How to use wbr tag for word break opportunity:
Enter some content <wbr />and put wbr tag <wbr />inside them just <wbr /> like this. The wbr tag coming for three times here.
From syntax, you can see the tag inside the content. The place will be anywhere you want the word break. You can put multiple numbers of this tag inside the paragraph.
This is the example to show the line break opportunity using the wbr tag.
This is a text to show the <wbr />line break opportunity. The opportunity is <wbr /> necessary/useful/wish/happen/put/next/weight of the line.
The wbr tag is an empty tag within which no content goes.
From the output of the example, you can see that line break only works when the browser wants it. The text after <wbr> tag will go to the next line. This is what wbr tag does with the content.
wbr as an HTML5 tag
wbr tag is widely used for years and treated as a non-standard tag. But now it becomes a standard HTML5 element.
Difference Between wbr> and br tag
- The HTML br tag forces the line break while wbr tag represents a line break opportunity.
- The wbr tag line break opportunity only make a line break if it is necessary. The br tag renders a line break from the place where you put it suitable.