white-space

  • Revision slug: CSS/white-space
  • Revision title: white-space
  • Revision id: 238306
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The white-space CSS property is used to to describe how whitespace inside the element is handled.

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

Syntax

white-space:  normal | pre | nowrap | pre-wrap | pre-line | {{ cssxref("inherit") }}

Values

normal
Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
pre
Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <br> elements.
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
pre-wrap {{ Fx_minversion_inline("3") }}
Sequences of whitespace are preserved. Lines are only broken at newline characters in the source, at <br>, and as necessary to fill line boxes.
pre-line {{ Fx_minversion_inline("3") }}
Sequences of whitespace are collapsed. Lines are broken at newlines in the source, at <br>, and as necessary to fill line boxes.

The following table summarizes the behavior of various white-space values:

  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap
Note: white-space:pre-line is not implemented in Firefox prior to version 3.5 (Gecko 1.9.1).

Examples

code { white-space: pre; }

Specifications

Browser compatibility

Browser Lowest version Support of
Internet Explorer 5.5 normal | nowrap
5.5 [*]
6.0 normal | pre | nowrap
8.0 normal | pre | nowrap | pre-wrap | pre-line
Firefox (Gecko) 1.0 (1.0) normal | pre | nowrap | -moz-pre-wrap
3.0 (1.9) normal | pre | nowrap | pre-wrap | -moz-pre-wrap
3.5 (1.9.1) normal | pre | nowrap | pre-wrap | pre-line
Opera 4.0 normal | pre | nowrap
8.0 normal | pre | nowrap | pre-wrap
9.5 normal | pre | nowrap | pre-wrap | pre-line
Safari (WebKit) 1.0 (85) normal | pre | nowrap
3.0 (522) normal | pre | nowrap | pre-wrap | pre-line

[*] Internet Explorer 5.5+ supports {{ Cssxref("word-wrap") }}: break-word;
The following code allows line breaking inside pre elements:

pre {
      word-wrap: break-word;      /* IE 5.5-7 */
      white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
      white-space: pre-wrap;      /* current browsers */
}

See also

{{ CSS_Reference:Text() }}{{ languages( { "pl": "pl/CSS/white-space","fr":"fr/CSS/white-space" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The<code> white-space </code>CSS property is used to to describe how whitespace inside the element is handled.</p>
<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 class="eval">white-space:  normal | pre | nowrap | pre-wrap | pre-line | {{ cssxref("inherit") }}</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    normal</dt>
  <dd>
    Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.</dd>
  <dt>
    pre</dt>
  <dd>
    Sequences of whitespace are preserved, lines are only broken at newline characters in the source and at <code>&lt;br&gt;</code> elements.</dd>
  <dt>
    nowrap</dt>
  <dd>
    Collapses whitespace as for<code> normal</code>, but suppresses line breaks (text wrapping) within text.</dd>
  <dt>
    pre-wrap {{ Fx_minversion_inline("3") }}</dt>
  <dd>
    Sequences of whitespace are preserved. Lines are only broken at newline characters in the source, at <code>&lt;br&gt;</code>, and as necessary to fill line boxes.</dd>
  <dt>
    pre-line {{ Fx_minversion_inline("3") }}</dt>
  <dd>
    Sequences of whitespace are collapsed. Lines are broken at newlines in the source, at <code>&lt;br&gt;</code>, and as necessary to fill line boxes.</dd>
</dl>
<p>The following table summarizes the behavior of various<code> white-space </code>values:</p>
<table class="standard-table">
  <thead>
    <tr>
      <th> </th>
      <th>New lines</th>
      <th>Spaces and tabs</th>
      <th>Text wrapping</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>normal</th>
      <td>Collapse</td>
      <td>Collapse</td>
      <td>Wrap</td>
    </tr>
    <tr>
      <th>pre</th>
      <td>Preserve</td>
      <td>Preserve</td>
      <td>No wrap</td>
    </tr>
    <tr>
      <th>nowrap</th>
      <td>Collapse</td>
      <td>Collapse</td>
      <td>No wrap</td>
    </tr>
    <tr>
      <th>pre-wrap</th>
      <td>Preserve</td>
      <td>Preserve</td>
      <td>Wrap</td>
    </tr>
    <tr>
      <th>pre-line</th>
      <td>Preserve</td>
      <td>Collapse</td>
      <td>Wrap</td>
    </tr>
  </tbody>
</table>
<div class="note" id="Notes">
  <strong>Note</strong>: <code>white-space:pre-line</code> is not implemented in Firefox prior to version 3.5 (Gecko 1.9.1).</div><h2 id="Examples">Examples</h2>
<pre>code { white-space: pre; }</pre>
<h2 id="Specifications">Specifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#white-space-prop">CSS 2.1 Text #white-space</a></li>
</ul>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Lowest version</th>
      <th>Support of</th>
    </tr>
    <tr>
      <td rowspan="4">Internet Explorer</td>
      <td>5.5</td>
      <td><code>normal | nowrap</code></td>
    </tr>
    <tr>
      <td>5.5</td>
      <td>[*]</td>
    </tr>
    <tr>
      <td>6.0</td>
      <td><code>normal | pre | nowrap</code></td>
    </tr>
    <tr>
      <td><strong>8.0</strong></td>
      <td><code>normal | pre | nowrap | pre-wrap | pre-line</code></td>
    </tr>
    <tr style="border-top: 2px solid silver;">
      <td rowspan="3">Firefox (Gecko)</td>
      <td>1.0 (1.0)</td>
      <td><code>normal | pre | nowrap | -moz-pre-wrap</code></td>
    </tr>
    <tr>
      <td>3.0 (1.9)</td>
      <td><code>normal | pre | nowrap | pre-wrap | -moz-pre-wrap</code></td>
    </tr>
    <tr>
      <td><strong>3.5</strong> (1.9.1)</td>
      <td><code>normal | pre | nowrap | pre-wrap | pre-line</code></td>
    </tr>
    <tr style="border-top: 2px solid silver;">
      <td rowspan="3">Opera</td>
      <td>4.0</td>
      <td><code>normal | pre | nowrap</code></td>
    </tr>
    <tr>
      <td>8.0</td>
      <td><code>normal | pre | nowrap | pre-wrap</code></td>
    </tr>
    <tr>
      <td><strong>9.5</strong></td>
      <td><code>normal | pre | nowrap | pre-wrap | pre-line</code></td>
    </tr>
    <tr style="border-top: 2px solid silver;">
      <td rowspan="2">Safari (WebKit)</td>
      <td>1.0 (85)</td>
      <td><code>normal | pre | nowrap</code></td>
    </tr>
    <tr>
      <td><strong>3.0</strong> (522)</td>
      <td><code>normal | pre | nowrap | pre-wrap | pre-line</code></td>
    </tr>
  </tbody>
</table>
<p>[*] Internet Explorer 5.5+ supports {{ Cssxref("word-wrap") }}<code>: break-word;</code><br>
  The following code allows line breaking inside<code> pre </code>elements:</p>
<pre>pre {
      word-wrap: break-word;      /* IE 5.5-7 */
      white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
      white-space: pre-wrap;      /* current browsers */
}
</pre>
<h2 id="See_also">See also</h2>
<p>{{ CSS_Reference:Text() }}{{ languages( { "pl": "pl/CSS/white-space","fr":"fr/CSS/white-space" } ) }}</p>
Revert to this revision