Revision 921733 of overflow-wrap

<div>{{CSSRef}}</div>

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

<p>The <strong><code>word-wrap</code></strong> property is used to specify whether or not the browser may break lines within words in order to prevent overflow 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>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">
/* Keyword values */
word-wrap: normal;
word-wrap: break-word;

/* Global values */
word-wrap: inherit;
word-wrap: initial;
word-wrap: unset;
</pre>

<h3 id="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>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<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>{{ SpecName('CSS3 Text', '#propdef-word-wrap', 'word-wrap') }}</td>
   <td>{{ Spec2('CSS3 Text') }}</td>
   <td>Initial definition</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>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>Microsoft's original documentation: <a class="external" href="https://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx" title="https://msdn.microsoft.com/en-us/library/ms531186(VS.85,loband).aspx">MSDN Microsoft library word-wrap</a></li>
</ul>