HTML <wbr> Tag

The <wbr> tag is used to instruct the browser, where in the text a line-break could be added. Unlike the <br> tag, which oblige the browser to insert a line-break, when <wbr> is used the browser first analyze its content, and then insert a line-break if necessary (too long word or URL address).

In case you do not use the <wbr> tag, long words could either wrap in a wrong place (making it difficult to read), or not wrap at all - pushing the page layout to the side.

The <wbr> tag is a new element in HTML5, and is not supported in Internet Explorer. In Internet Explorer 8 and Opera up to 11.7 version long strings of text are not wrapped if there is no CSS property display:inline-block.

Syntax

The <wbr> tag is an empty tag, the closing </wbr> can be omitted.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Example of a long string of text without wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
    <p>Example of a long string of text with wbr.</p>
    <p>This is the longest word you can ever meet in the English language pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coniosis</p>
    </p>
  </body>
</html>

Attributes

The <wbr> tag supports the Global Attributes.