Suppose that you have this HTML code in your web page:
<div style="width:200px; background-color:#ECECEC;"> Welcome to <a href="#">https://hieule.info</a>, please give some comment to help me improve my articles. </div>
This will be displayed as below in your web browser
You may notice that there is a ugly gap in your sentence. The same situation happens when your webpage is viewed under a difference screen size (e.g. on mobile screens).
The new version of our snippet using new <wbr> tag is as follow:
<div style="width:200px; background-color:#ECECEC;"> Welcome to <a href="#">https://<wbr>web<wbr>trung<wbr>hieu<wbr>.info</a>, please give some comment to help me improve my articles. </div>
And this is the result, the gap is removed!
The <wbr> tag is defined as:
The <wbr> tag defines where in a word it would be ok to add a line-break.
That means it does not force the browser add a line-break like the <br> tag but tell the browser it can be allowed to add a line-break here when needed. It helps us a lot when our content has long words, especially a web url as above, and need rendering on several screen size. By using the <wbr> tag in suitable places, you can keep your webpage looking well in most cases