HTML <wbr> tag

The <wbr> tag defines a word break opportunity which is a suggestion to the browser where to break a word at the end of a line. This tag helps maintain readability of the text.

HTML Tag

Example

#

A long word with several <wbr> elements.

This is a longwordthatbreakswherereadabilityismaintained.

<p style="border:1px solid lightblue; padding:15px; max-width:250px;">
  This is a long<wbr>word<wbr>that<wbr>breaks<wbr>where<wbr>readability<wbr>is<wbr>maintained.
</p>
wbr = word break

Using <wbr>

The <wbr> tag is known as a 'word break opportunity'.

This tag specifies where the browser can break (i.e., wrap) a word.

It helps create responsive text on smaller form factors, such as, pads and phones.

Using <wbr> ensures that a word is broken at a correct location to maintain readability.

More Examples

A <wbr> tag. The long word Honorificabilitudinitatibus is broken into Honorifica and bilitudini when it exceeds the width of the container. By the way: it is a real word.

Honorificabilitudinitatibus is the longest word in Shakespear's works.

<p style="width:140px;border:1px solid lightblue;">
   Honorifica<wbr>bilitudini</wbr>tatibus is the 
   longest word in Shakespear's works. 
</p>

Note: The word Honorificabilitudinitatibus appears in one of the works by Shakespeare and it is the second longest word in English. It derives from latin and means: ""the state of being able to achieve honours".


Attributes for <wbr>

The <wbr> element has no attributes, but it does accept global attributes.
They are rarely, if ever, used.


Did you know?

Did you know?

Which is correct <wbr> or <wbr />

Both <wbr> and <wbr /> formats are correct.

Since <wbr> is self-closing no additional elements can be placed inside it.

The <br /> tag (with /) was introduced for XHTML compatibility on self-closing tags.


Browser support

Here is when <wbr> support started for each browser:

Chrome
1.0 Dec 2008
Firefox
3.0 Jun 2008
IE/Edge
12.0 Jul 2015
Opera
11.7 May 2012
Safari
4.0 Jun 2009

You may also like

Guides