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/>
Su
<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
One of my favorite quotes from
William Shakespeare
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:
- with the former, the default behavior is not to wrap (white-space: nowrap or white-space: pre) and the <wbr/> tag specifies where to allow wrapping
- with the latter, the default behavior is to wrap (white-space: normal, white-space: pre-wrap or white-space: pre-line) and white-space: nowrap specifies where not to wrap