<wbr> HTML Tag

Element of
Fonts and Web Typography
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.

This is the mysterious user account for the HTML.com admin.