Subscribe

What is the wbr HTML tag and why do I need it?

✍️

How the wbr HTML tag can help you out!

9 Dec, 2020 · 2 min read

So, a straightforward explanation of the <wbr> tag in HTML stands for a work break. It doesn't mean it will break every time, but it will break every time it needs to.

You might think, huh, but CSS can do this using word-break: break-all, and yes, that will work, but we will have zero control.

To quickly show you the difference:

wbr vs css

As you can see right away, the <wbr> version is way more readable because we control where it breaks! The CSS solution will just break every time.

Of course, you can't go and edit every content piece on your website, but I find this method super useful for headers!

How the HTML <wbr> tag works

It's super easy to use this tag. We simply place it in the long word where it might have a breakpoint!

super<wbr />long<wbr />word<wbr />that<wbr />needs<wbr />to<wbr />break<wbr />better

You can see this is just a bogus word, but if we run this in our demo, you will see it breaks only on these points if it needs to!

It is an empty element meaning it doesn't have an end tag and doesn't need to self-close.

In the example above, we can have multiple breaks in one word.

Note: If you go smaller than the smallest breaks, it will not show!

Demo

I created this demo on Codepen to demonstrate the difference between the <wbr> HTML tag and the CSS word-break method.

You can resize these boxes horizontally to see the breakpoints.

See the Pen What is the HTML tag and why do I need it? by Chris Bongers (@rebelchris) on CodePen.

Browser Support

Full support!! Since IE is dead 💁‍♂️! I really like to use this super cool HTML attribute to fix minor responsive design issues.

HTML wbr support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Moving from GIF to video format

27 Jun, 2021 · 3 min read

Moving from GIF to video format

Common HTML Element Types

3 May, 2021 · 4 min read

Common HTML Element Types

Join 1513 devs and subscribe to my newsletter