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.
A long word with several <wbr> elements.
This is a long
<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
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.
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.
Honorifica
<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".
The <wbr> element has no attributes, but it does accept global attributes.
They are rarely, if ever, used.
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.
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 |
