word-wrap

  • Revision slug: CSS/Word-wrap
  • Revision title: word-wrap
  • Revision id: 5375
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment example added; 43 words added, 19 words removed

Revision Content

{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}

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.

  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

word-wrap:  normal | break-word | inherit

Values

normal
Lines may only break at normal word break points.
break-word
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

Browser compatibility

Browser Lowest Version
Internet Explorer 5.5
Firefox (Gecko) 3.5 (1.9.1)
Opera ---
Safari (WebKit) 1.0 (85)
  • word-wrap:break-word can be used to work around lack of white-space:pre-wrap support in IE 5.5-7. See {{ Cssxref("white-space#Browser_compatibility") }} for an example.
  • IE8 introduced -ms-word-wrap as a  synonym for word-wrap. Don't use the -ms- prefix.

See also

{{ CSS_Reference:Text() }}

Revision Source

<p>{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}</p>
<h3>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>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">word-wrap:  normal | break-word | inherit
</pre>
<h3>Values</h3>
<dl> <dt>normal </dt> <dd>Lines may only break at normal word break points. </dd> <dt>break-word </dt> <dd>Unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. </dd>
</dl>
<h3>Examples</h3>
<pre>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>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>
<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> Working draft</li> <li><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>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td><strong>5.5</strong></td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>3.5</strong> (1.9.1)</td> </tr> <tr> <td>Opera</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>1.0</strong> (85)</td> </tr> </tbody>
</table>
<ul> <li><code>word-wrap:break-word </code>can be used to work around lack of<code> white-space:pre-wrap </code>support in IE 5.5-7. See {{ Cssxref("white-space#Browser_compatibility") }} 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>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision