word-wrap

  • Revision slug: CSS/word-wrap
  • Revision title: word-wrap
  • Revision id: 239316
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Moved From CSS/Word-wrap to CSS/word-wrap

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The word-wrap CSS property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.

Note: Originally a Microsoft (unprefixed) proprietary extension, the word-wrap property has been renamed overflow-wrap in latest drafts of the CSS3 Text specification, though no implementation has switched to this new naming for the moment.
  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

word-wrap:  normal | break-word

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
word-wrap {{ CompatGeckoDesktop("1.9.1") }} 1.0 5.5 10.5 1.0
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
word-wrap {{ 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

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>word-wrap</code> <a href="/en/CSS" title="CSS">CSS</a> property is used to to specify whether or not the browser is allowed to break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit.</p>
<div class="note">
  <strong>Note:</strong> Originally a Microsoft (unprefixed) proprietary extension, the <code>word-wrap</code> property has been renamed <code>overflow-wrap</code> in latest drafts of the CSS3 Text specification, though no implementation has switched to this new naming for the moment.</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("normal") }}</li>
  <li><dfn>Applies to:</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre>word-wrap:  normal | break-word
</pre>
<h2 id="Values">Values</h2>
<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">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">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> </td>
    </tr>
  </tbody>
</table>
<h2 id="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><code>word-wrap</code></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><code>word-wrap</code></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">See also</h2>
<ul>
  <li>Text-related CSS properties: {{ CSS_Reference:Text() }}</li>
  <li>The Microsoft 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>
    <p> </p>
  </li>
</ul>
Revert to this revision