Have you ever wanted to use a super long word such as supercalifragilisticexpialidocious in an article on a web page, but didn’t because it was too long, and you didn’t want to mess up word wrapping? It would be supercalifragilisticexpialidocious to be able to use such long words and know that wrapping wasn’t going to be an issue. The reality is that HTML provides a tag that lets you wrap words in the middle by telling the browser where the word can be broken!
The HTML wbr tag is used to indicate where a line break can occur. Note that the wbr tag doesn’t mandate the break but is just an indicator that if a break is needed, then the location of the wbr tag is an acceptable place to break. This attribute is generally used in locations that would not otherwise be used for line breaks, such as in the middle of a word.
HTML Magic
In the case of supercalifragilisticexpialidocious, the wbr tag could be added between every syllable, or simply in a couple of places in case breaks are needed. The following shows a bit of HTML code using the tag:
<div> <p>The wbr tag is supercalifragilisticexpialidocious! </p> <p> The wbr tag is super<wbr>cali<wbr>fragilistic<wbr>expiali<wbr>docious! </p> </div>
When you display this in your browser, you’ll see that it shows the same sentence twice:
The magic, however, happens when you reduce the width of the browser window or view the page on a mobile device with a reduced width browser window. Then you’ll see that the second line wraps much better than the first:
You might be thinking that this isn’t that useful of a tag because, you are not likely to use the word supercalifragilisticexpialidocious or other extremely long words on your web pages. While this is true, there is a likelihood you’ll use other strings of text that are long, such as a site URL.
The wbr tag is useful when listing long URLs on your web pages. The wbr tag can indicate locations to break the URL as well! While an URL will wrap at some punctuation and symbol locations, there are times you will want to control the breaking better. For example, not all browsers will wrap at a period in a ULR. For those that do, the URL will wrap after the period, which can make it look like the end of a sentence when a URL is embedded in text. To help avoid this, you can add the wbr tag before the periods in a URL. The following shows a snippet of code to help illustrate this:
<div> <ul> <li>If you are looking for an article on IBM Bots, you should read "Using a Free Custom IBM Bot," which can be found at https://www.htmlgoodies.com/beyond/using.a.free.custom.ibm.bot.html.</li> </ul> </div>
Without the wbr tag, this wraps with a large gap:
By adding the wbr tag within the URL, you can get rid of the big gap as the following code shows:
<div> <ul> <li>If you are looking for an article on IBM Bots, then you should read "Using a Free Custom IBM Bot", which can be found at https://www<wbr>.htmlgoodies<wbr>.com/beyond/using<wbr>.a<wbr>.free<wbr>.custom<wbr>.ibm<wbr>.bot<wbr>.html.</li> </ul> </div>
Using the same browser width, you can see the difference in wrapping:
In Conclusion
The wbr tag is a simple tag and most people are unaware that it exists. If you find that you want things to wrap differently than the default, then the wbr tag is a perfect solution. Of course, like all code you use, you should verify that it is supported in all the browsers your user might employ. At the time of this writing, the major browsers (Chrome, Edge, Firefox, Opera, Safari) support the wbr tag. Internet Explorer is not guaranteed to support this.
