<wbr> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <wbr> HTML Tag do?
The <wbr> element is used to define a word break opportunity in a string of text. It is particularly useful when you wish to define word break opportunities in a long unbroken string of text that might otherwise break improperly.
Display
inline
Usage
semantic

Code Example

<p>Control where a really long string of unbroken text can break with the &lt;wbr&gt; element, 
like this: <wbr>super<wbr>cali<wbr>fragi<wbr>listic<wbr>expi<wbr>ali<wbr>docious.</p>

Control where a really long string of unbroken text can break with the <wbr> element, like this: supercalifragilisticexpialidocious.

Give Me a Break!

Here you go: <wbr>. In essence, that is how the <wbr> element works. When inserted into a long block of text that really should be rendered as a single unbroken string, the string will break where the <wbr> tag is inserted if the browser is looking for a place to break the string.

When is this element useful? You probably won’t have a lot of opportunities to use this element. However, when you do need it, it can come in very handy. Let’s look at an example:

<p>You will find the file you need by going to directory/subdirectory/deeper/and/deeper/down/the/rabbit/hole/hereitis.</p>

When we render that bit of text, here’s what we get:

You will find the file you need by going to directory/subdirectory/deeper/and/deeper/down/the/rabbit/hole/hereitis.

Since there was no line-break opportunity, the entire file path jumped down to the next line. Not ideal. Instead, what we really want to happen is for the file path to break in between directory names. To make that happen, let’s add some <wbr> elements.

<p>You will find the file you need by going to directory<wbr>/subdirectory<wbr>/deeper<wbr>/and<wbr>/deeper<wbr>/down<wbr>/the<wbr>/rabbit<wbr>/hole<wbr>/hereitis.</p>

Now, when we render that paragraph, the file path will break appropriately.

You will find the file you need by going to directory/subdirectory/deeper/and/deeper/down/the/rabbit/hole/hereitis.

Adam is a technical writer who specializes in developer documentation and tutorials.