|
If you find this helpful, please click the Google |
Button
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
<wbr/> Tag Syntax
<body> ... ... phrasing content expected ...<wbr/>... ... </body>
Rules for coding the HTML wbr element
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Code the wbr element where phrasing content is expected.
- The wbr element consists of a standalone
<wbr/>tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from thexmlnsattribute on the <html> tag. - Include any HTML global attributes on the <wbr> tag as appropriate.
- Since the
<wbr/>tag is a void element, it should always be coded as a self-closing tag terminated with the delimiter string/>.
<wbr/> Content Model
Contents of the wbr element
Content: Empty. Any properties are coded using global attributes.
Since the <wbr/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiters /> rather than just > (<wbr/>).
<wbr/> Tag Attributes
Attributes of the <wbr/> tag
| global attributes | In addition to the personal attributes of the <wbr/> tag below, any of the common HTML attributes can also be coded. |
<wbr/> Tag Examples
Examples of the <wbr/> tag in HTML 5
style="white-space: normal" with <wbr/> tag
(see <wbr/> tag demo above)
<p>Su<wbr/>per<wbr/>ca<wbr/>li<wbr/>fra<wbr/>gi<wbr/>lis<wbr/>tic<wbr/>ex<wbr/>pi<wbr/>al<wbr/>i<wbr/>do<wbr/>cious Su<wbr/>per<wbr/>ca<wbr/>li<wbr/>fra<wbr/>gi<wbr/>lis<wbr/>tic<wbr/>ex<wbr/>pi<wbr/>al<wbr/>i<wbr/>do<wbr/>cious Su<wbr/>per<wbr/>ca<wbr/>li<wbr/>fra<wbr/>gi<wbr/>lis<wbr/>tic<wbr/>ex<wbr/>pi<wbr/>al<wbr/>i<wbr/>do<wbr/>cious Su<wbr/>per<wbr/>ca<wbr/>li<wbr/>fra<wbr/>gi<wbr/>lis<wbr/>tic<wbr/>ex<wbr/>pi<wbr/>al<wbr/>i<wbr/>do<wbr/>cious Su<wbr/>per<wbr/>ca<wbr/>li<wbr/>fra<wbr/>gi<wbr/>lis<wbr/>tic<wbr/>ex<wbr/>pi<wbr/>al<wbr/>i<wbr/>do<wbr/>cious</p>
style="white-space: nowrap" with <wbr/> tag
(see <wbr/> tag demo above)
<p style="white-space: nowrap">Reasons for this include that I wanted each reason to be <wbr/>1) numbered, <wbr/>2) on the same line when possible, and <wbr/>3) not split in the middle, <wbr/>and I was too lazy to <wbr/>4) figure out how to use CSS, <wbr/>5) span/nowrap each reason, or <wbr/>6) code an inline ordered list.</p>
<p>One of my favorite quotes from <span style="white-space: nowrap">
<a href="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html">
<cite>William Shakespeare <wbr/>Twelfth Night <wbr/>Act II Scene 5</cite></a>:</span>
</p>
<blockquote
cite="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html"
>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.
</blockquote>
style="white-space: pre" with <wbr/> tag
(see <wbr/> tag demo above)
This code suggests wrapping before each HTML attribute.
<pre><img src="http://www.ExampleOnly.com/images/how-to-use-images-in-html-documents.png" <wbr/>alt="How to use images in HTML documents" <wbr/>style="border: 1px solid black"/></pre>
Changes in HTML 5 - <wbr/> Tag
What's new in HTML 5
The <wbr/> tag is one of the new elements in HTML 5.
Differences between HTML 5 and earlier versions of HTML
The <wbr/> tag did not exist in older versions of HTML.
The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the wbr element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.