Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 844731 of <wbr>

  • Revision slug: Web/HTML/Element/wbr
  • Revision title: <wbr>
  • Revision id: 844731
  • Created:
  • Creator: Sebastianz
  • Is current revision? No
  • Comment Moved browser-specific info into a note below the compatibility table
Tags: 

Revision Content
{{HTMLVersionHeader(5)}}

Summary

The Word Break Opportunity (<wbr>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.

On UTF-8 encoded pages, <wbr> behaves like the U+200B ZERO-WIDTH SPACE code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on bidi-ordering: <div dir=rtl>123,<wbr>456</div> displays, when not broken on two lines, 123,456 and not 456,123.

For the same reason, the <wbr> element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (&shy;) instead.

This element was first implemented in Internet Explorer 5.5 and was officially defined in HTML5.

Usage Context

Permitted content Empty
Tag omission It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.
Permitted parent elements Any element that accepts phrasing content.
Normative document HTML 5, section 4.6.24

Attributes

This element only includes the global attributes.

DOM Interface

This element implements the HTMLElement interface.

Example

The Yahoo Style Guide recommends breaking a URL before punctuation, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.

<p>https://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>

{{EmbedLiveSample("Example")}}

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 {{CompatNo}}[1] 11.7 4.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 {{CompatNo}} {{CompatNo}} {{CompatNo}}

[1] Support for the <wbr> tag was introduced in Internet Explorer 5.5, though removed again in version 7.

{{HTMLRef}}

Revision Source

 
<div>{{HTMLVersionHeader(5)}}</div>

<h2 id="Summary">Summary</h2>

<p>The <em>Word Break Opportunit</em><em>y</em> (<code>&lt;wbr&gt;</code>) HTML element represents a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.</p>

<p>On UTF-8 encoded pages, <code>&lt;wbr&gt;</code> behaves like the <code>U+200B</code><code> ZERO-WIDTH SPACE</code> code point. In particular, it behaves like a Unicode bidi BN code point, meaning it has no effect on bidi-ordering: <code>&lt;div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt;</code> displays, when not broken on two lines, <code>123,456</code> and not <code>456,123</code>.</p>

<p>For the same reason, the <code>&lt;wbr&gt;</code> element does not introduce a hyphen at the line break point. To make a hyphen appear only at the end of a line, use the soft hyphen character entity (<code>&amp;shy;</code>) instead.</p>

<p>This element was first implemented in Internet Explorer 5.5 and was officially defined in HTML5.</p>

<h2 id="Usage_Context">Usage Context</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Permitted content</td>
   <td>Empty</td>
  </tr>
  <tr>
   <td>Tag omission</td>
   <td>It is an {{Glossary("empty element")}}; it must have a start tag, but must not have an end tag.</td>
  </tr>
  <tr>
   <td>Permitted parent elements</td>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</td>
  </tr>
  <tr>
   <td>Normative document</td>
   <td><a class="external" href="https://dev.w3.org/html5/spec/text-level-semantics.html#the-wbr-element" title="https://dev.w3.org/html5/spec/text-level-semantics.html#the-wbr-element">HTML 5, section 4.6.24</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes">Attributes</h2>

<p><span style="line-height:21px">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height:21px">.</span></p>

<h2 id="DOM_Interface">DOM&nbsp;Interface</h2>

<p>This element implements the <a href="/en-US/docs/DOM/HTMLElement" title="DOM/HTMLElement">HTMLElement</a> interface.</p>

<h2 id="Example">Example</h2>

<p><em style="font-style:italic"><a class="external" href="https://styleguide.yahoo.com/" title="https://styleguide.yahoo.com/">The Yahoo Style Guide</a> </em>recommends <a class="external" href="https://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses" title="https://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">breaking a URL <em>before</em> punctuation</a>, to avoid leaving a punctuation mark at the end of the line, which the reader might mistake for the end of the URL.</p>

<pre class="brush: html">
&lt;p&gt;https://this&lt;wbr&gt;.is&lt;wbr&gt;.a&lt;wbr&gt;.really&lt;wbr&gt;.long&lt;wbr&gt;.example&lt;wbr&gt;.com/With&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;wbr&gt;/deeper&lt;wbr&gt;/level&lt;wbr&gt;/pages&lt;/p&gt;
</pre>

<p>{{EmbedLiveSample("Example")}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>1.0</td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>11.7</td>
   <td>4.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.5</td>
   <td>1.0</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Support for the <code>&lt;wbr&gt;</code> tag was introduced in Internet Explorer 5.5, though removed again in version 7.</p>

<p>{{HTMLRef}}</p>
Revert to this revision