<wbr> HTML Tag

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>

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:

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.

Adam Wood

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