<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
<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
<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.
<wbr> ensures that a word is broken at a correct location to maintain readability.
<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.
<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".
<wbr> element has no attributes, but it does accept global attributes.
They are rarely, if ever, used.
<wbr /> formats are correct.
<wbr> is self-closing no additional elements can be placed inside it.
<br /> tag (with
/) was introduced for XHTML compatibility on self-closing tags.
Here is when
<wbr> support started for each browser: