Revision 567103 of word-wrap

  • Revision slug: Web/CSS/word-wrap
  • Revision title: word-wrap
  • Revision id: 567103
  • Created:
  • Creator: LouisLazaris
  • Is current revision? No
  • Comment No reason for the warning, this works in every browser w/o prefix

Revision Content

{{CSSRef}}

Summary

The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box.

Note: Originally a Microsoft (unprefixed) proprietary extension, the word-wrap property has been renamed {{cssxref("overflow-wrap")}} in the current draft of the CSS3 Text specification. word-wrap is now considered an "alternate name" for overflow-wrap. Stable builds of Google Chrome and Opera support the new syntax.

{{cssbox("word-wrap")}}

Syntax

Formal syntax: {{csssyntax("word-wrap")}}
word-wrap: normal
word-wrap: break-word

word-wrap: inherit

Values

normal
Indicates that lines may only break at normal word break points.
break-word
Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Examples

p { width: 13em; background: gold; }

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

p { width: 13em; background: gold; word-wrap: break-word; }

FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)

Specifications

Specification Status Comment
CSS Text Level 3 {{ Spec2('CSS3 Text') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.9.1") }} 1.0 5.5 10.5 1.0
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("1.9.1") }} 1.0 {{ CompatUnknown() }} {{ CompatUnknown() }} 1.0
  • word-wrap:break-word can be used to work around lack of pre{white-space:pre-wrap} support in IE 5.5-7. See {{ Cssxref("white-space") }} for an example.
  • IE8 introduced -ms-word-wrap as a synonym for word-wrap. Don't use the -ms- prefix.

See also

Revision Source

<div>
 {{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>word-wrap</code> <a href="/en/CSS" title="CSS">CSS</a> property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box.</p>
<div class="note">
 <strong>Note:</strong> Originally a Microsoft (unprefixed) proprietary extension, the <code>word-wrap</code> property has been renamed {{cssxref("overflow-wrap")}} in the current draft of the CSS3 Text specification. <code>word-wrap</code> is now considered an "alternate name" for <code>overflow-wrap</code>. Stable builds of Google Chrome and Opera support the new syntax.</div>
<p>{{cssbox("word-wrap")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("word-wrap")}}</pre>
<pre>
word-wrap: normal
word-wrap: break-word

word-wrap: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
 <dt>
  <code>normal</code></dt>
 <dd>
  Indicates that lines may only break at normal word break points.</dd>
 <dt>
  <code>break-word</code></dt>
 <dd>
  Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
p { width: 13em; background: gold; }</pre>
<p style="width:13em; background:gold">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
<pre class="brush: css">
p { width: 13em; background: gold; word-wrap: break-word; }</pre>
<p style="word-wrap:break-word; width:13em; background:gold">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a class="external" href="http://dev.w3.org/csswg/css3-text/#overflow-wrap" title="http://dev.w3.org/csswg/css3-text/#overflow-wrap">CSS Text Level 3</a></td>
   <td>{{ Spec2('CSS3 Text') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<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>Firefox (Gecko)</th>
    <th>Chrome</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
    <td>1.0</td>
    <td>5.5</td>
    <td>10.5</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>Android</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatGeckoMobile("1.9.1") }}</td>
    <td>1.0</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<ul>
 <li><code>word-wrap:break-word </code>can be used to work around lack of<code> pre{white-space:pre-wrap} </code>support in IE 5.5-7. See {{ Cssxref("white-space") }} for an example.</li>
 <li>IE8 introduced<code> -ms-word-wrap </code>as a synonym for<code> word-wrap</code>. Don't use the <code>-ms-</code> prefix.</li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>Text-related CSS properties: {{ CSS_Reference:Text() }}</li>
 <li>Microsoft's original documentation: <a class="external" href="http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx">MSDN Microsoft library word-wrap</a></li>
</ul>
Revert to this revision