The <wbr/> Tag in HTML 5

In content with white-space: normal style, a browser will normally put a line break only where a space character or other white space occurs in the HTML code and with white-space: nowrap or white-space: pre line breaks appear only where explicitly indicated. The <wbr/> tag can be used to specify additional places where the browser can do a line break if necessary. It is one of the inline tags used to group and separate content in HTML.

<wbr/> in content with white-space: normal

In a normal paragraph, the <wbr> tag can be used in non-whitespace text to indicate where breaks may occur within words:

Without <wbr/>

Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious

With <wbr/>

Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious Supercalifragilisticexpialidocious

<wbr/> in content with white-space: nowrap

Without <wbr/>

Reasons for this include that I wanted each reason to be 1) numbered, 2) on the same line when possible, and 3) not split in the middle, and I was too lazy to 4) figure out how to use CSS, 5) span/nowrap each reason, or 6) code an inline ordered list.

With <wbr/>

Reasons for this include that I wanted each reason to be 1) numbered, 2) on the same line when possible, and 3) not split in the middle, and I was too lazy to 4) figure out how to use CSS, 5) span/nowrap each reason, or 6) code an inline ordered list.

One of my favorite quotes from William Shakespeare Twelfth Night Act II Scene 5:

In my stars I am above thee; but be not afraid of greatness: some are born great, some achieve greatness, and some have greatness thrust upon 'em.

These are actual working examples of the <wbr> tag example code below. Resize the browser window narrower or wider to see whether or not your browser supports this tag in content with a white-space: nowrap style. WebKit-based browsers such as Chrome and Safari are the first ones to support the word break tag in this context and break the content across multiple lines where indicated; Firefox and Opera do not and instead move larger spans of content to a separate line when it does not fit on the original line.

<wbr/> in content with white-space: pre

Example from HTML specification (wbr element). After adding the <wbr/> tags, the following code should have "Heading" and "Course" at the beginning of new lines and should also wrap, if necessary, before "HeadingCoordinates", "Maps" or "Speeds".

Without <wbr/>

...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], HeadingCoordinates[2], HeadingCoordinates[3], HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, Maps.MapFactoryFromHeading(heading), Speeds.GetMaximumSpeed().ConvertToWarp());
...

With <wbr/>

...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], HeadingCoordinates[2], HeadingCoordinates[3], HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, Maps.MapFactoryFromHeading(heading), Speeds.GetMaximumSpeed().ConvertToWarp());
...

Some additional examples:

Without <wbr/>

<img style="border: 1px solid black" src="http://www.ExampleOnly.com/images/how-to-use-images-in-html-documents.png" alt="An image with a diagram that shows how to use images in HTML documents"/>

With <wbr/>

<img style="border: 1px solid black" src="http://www.ExampleOnly.com/images/how-to-use-images-in-html-documents.png" alt="An image with a diagram that shows how to use images in HTML documents"/>

There is a <wbr/> tag before the style global attribute, <img alt> attribute and the <img src> attribute that allows the attributes to wrap onto new lines.

An alternative to the <wbr/> tag with white-space: pre is to use with white-space: pre-wrap instead. This eliminates the ability to use the <wbr/> to suggest the places where line breaks would best be placed, so white-space: nowrap must be added to avoid line breaks in the middle of the attribute values that have spaces:

Without white-space property:

<img style="border: 1px solid black" src="http://www.ExampleOnly.com/images/how-to-use-images-in-html-documents.png" alt="An image with a diagram that shows how to use images in HTML documents"/>

With white-space: nowrap for attributes:

<img style="border: 1px solid black" src="http://www.ExampleOnly.com/images/how-to-use-images-in-html-documents.png" alt="An image with a diagram that shows how to use images in HTML documents"/>

While similar results can be achieved with both approaches, the main difference between using the <wbr/> tag and white-space: nowrap is: