word-wrap

  • Revision slug: CSS/Word-wrap
  • Revision title: word-wrap
  • Revision id: 5366
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 12 words removed

Revision Content

{{ CSSRef() }}

{{ fx_minversion_header("3") }}

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: This property only has an effect when the text-wrap property is set to either normal or suppress.
  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

word-wrap: normal | break-word | inherit ;

Values

{{ Cssxref("normal") }}
Lines may only break at normal word break points.
{{ Cssxref("break-word") }}
Unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.  Shaping characters are still shaped as usual.

Examples

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

code {
  word-wrap: break-word;
}

Specifications

Browser compatibility

 

Browser Lowest Version
Internet Explorer 0
Firefox 3.1
Netscape 0
Opera 0
Safari ?

See also

{{ CSS_Reference:Text() }}

 

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ fx_minversion_header("3") }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>word-wrap</code> 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.</p>
<div class="note"><strong>Note:</strong> This property only has an effect when the <a class="internal" href="/en/CSS/text-wrap" title="en/CSS/text-wrap"><code>text-wrap</code></a> property is set to either <code>normal</code> or <code>suppress</code>.</div>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval">word-wrap: normal | break-word | inherit ;
</pre>
<h3 name="Values">Values</h3>
<dl><dt>{{ Cssxref("normal") }} </dt><dd>Lines may only break at normal word break points. </dd><dt>{{ Cssxref("break-word") }} </dt><dd>Unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.  Shaping characters are still shaped as usual. </dd></dl>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("word-wrap") }}</p>
<pre class="eval">code {
  word-wrap: break-word;
}</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-text/#word-wrap" title="http://www.w3.org/TR/css3-text/#word-wrap">CSS 3 text</a> </li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<p> </p>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>0</td> </tr> <tr> <td>Firefox</td> <td>3.1</td> </tr> <tr> <td>Netscape</td> <td>0</td> </tr> <tr> <td>Opera</td> <td>0</td> </tr> <tr> <td>Safari</td> <td>?</td> </tr> </tbody>
</table>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
<p> </p>
Revert to this revision