The <wbr> tag and when you might want to use it
The <wbr> tag is the type of thing that I originally created my articles for in the first place: An obscure HTML/CSS thing that, while it might not come up often, can really come in handy!
In this post, I'll be exploring what <wbr> does, but more important, a few use cases where you might find it being useful.
What is <wbr>?
<wbr> is short for Word Break—it's easy enough to remember, since I think everyone is familiar with <br>.
There are two big differences between <br> and <wbr> though.
<br>will always cause a break,<wbr>is an optional break.<br>is generally used for breaking between two words.<wbr>is used to break words.
Basically, you are telling the browser where it could break a word if it's too long, and would otherwise overflow outside it's parent, as we can see below.
We can fix the above with the use of <wbr>, though it has a bit of an issue.
Really long words like "anti<wbr />disestablish<wbr />mentarian<wbr />ism" can
cause problems in narrow containers, or on mobile devices, especially when they
are title.Results in:
You can see that I used 3 <wbr> above. I used three because I wasn't sure where it would break, so I gave it three options, and the browser uses the one that works best.
Can you spot the problem?
The browser doesn't hyphenate the break, making it look like two words. Ugh.
Better use cases
Because of that problem, it's not really ideal for long words. You could use it for long words in headings to stop any overlow issues on mobile if you're using large a large font-size, but it's going to be a little awkward without the hyphenation.
A better use case is one that I'm sure we've all run into at one point or another. Long URLs.
Ugh.
<wbr> to the rescue:
https://www<wbr />.kevinpowell<wbr />.co/article<wbr />/longtitlehere/It might not be the perfect solution, but it's a lot better than the URL overflowing out the side, either being hidden, or causing some vertical scrolling.