Last Updated on April 26, 2023 by Roshan Parihar
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 automatically create new line when the browser finds it required for the wrapping. Place <wbr> tag in the location where you want to make text fit in the container.
When the paragraph content is too long to fit the container (like HTML <div> tag) , it requires wrapping of the content in that case. If the text size is increased from the line, the overflow text is placed in the next line.
<wbr> tag Syntax
1 |
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 that the tag should be placed inside the content. The place will be anywhere you want the inside the content for word break. You can place multiple <wbr> tags inside the paragraph as per your requirements.
A line break will only be happening when the browser thinks it is necessary. The line breaks only possible when there is a possibility for it to place a word to the next line.
1 |
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. |
Output
The <wbr> tag is an empty tag within which no content goes. From the output of the above 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 HTML 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.
If you have any query, you can send to Tutorialdeep mail id [email protected].