Always use <wbr> (word-break opportunity) tags when spelling out a long link. Do not assume that it will break automatically when the page is viewed on a small screen. The <wbr> tag identifies points where a very long string should break if it exceeds the width of the screen. This is what I learned recently while testing this blog.
I was using Google’s Mobile-Friendly Test when I got a warning that said something to the effect that the page was exceeding the viewport. I looked at the test screenshot and, indeed, I saw that the text of the page that I was testing was overflowing beyond the width of the sample screen!
At first I thought the error was with the template. But after going over my template again and again and not finding any possible errors I decided to look at the post itself. It was then that I realized that a spelled-out link was causing the problem. I consequently edited the post and inserted <wbr> tags at strategic points in the link and the error message went away.
This is how you can use <wbr> tags when spelling out long links:
http://averylong
Incidentally, this is an example of why you should always test your blog, and even individual pages, to root out hidden errors.
Apparently the
<wbr>tag does not work with Internet Explorer. Fortunately, there is a solution, which involves inserting the following line in the stylesheet:
wbr:after {content: "\00200B"}The above code inserts a zero-width space after the
<wbr>tag which solves the issue.
Labels: Internet