white-space

  • Revision slug: CSS/white-space
  • Revision title: white-space
  • Revision id: 19583
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes

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
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

white-space:  normal | pre | nowrap | pre-wrap | pre-line | inherit

Values

{{ Cssxref("normal") }}
All sequences of whitespace and line breaks will be collapsed. Line breaks are add to wrap the content.
{{ Cssxref("pre") }}
All white spaces in the source will be preserved, lines are only broken at newline characters in the source.
{{ Cssxref("nowrap") }}
All sequences of whitespace and line breaks will be collapsed, also line breaks (text wrapping) are suppressed within content.
{{ Cssxref("pre-wrap") }} {{ Fx_minversion_inline("3") }}
All white spaces in the source will be preserved, lines are broken at newline characters and as needed to wrap the content. For backward compatibility with Firefox 2, you may wish to also include -moz-pre-wrap, which does the same thing in older versions of Firefox but is ignored in Firefox 3.5 and later.
{{ Cssxref("pre-line") }} {{ Fx_minversion_inline("3") }}
All sequences of whitespace will be collapsed, lines are broken at newline characters and also as needed to wrap the content.
{{ Cssxref("inherit") }}
Inherits from parent.

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

 Examples

code {
  white-space: pre;
}

Notes

white-space: pre-line is not implemented in Firefox prior to version 3.5 (Gecko 1.9.1).

Specifications

Browser compatibility

Browser Lowest Version Support of
Internet Explorer 5.5 nowrap
5.5 (*)
6.0 pre
8.0 pre-wrap | pre-line
Firefox (Gecko) 1.0 (1.0) pre | nowrap | -moz-pre-wrap
3.0 (1.9) pre-wrap
3.5 (1.9.1) pre-line (-moz-pre-wrap dropped)
Opera 4.0 pre | nowrap
8.0 pre-wrap
9.5 pre-line
Safari (WebKit) 1.0 (85) pre | nowrap
3.0 (522) 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; /* Fx 1.0-2.0 */
      white-space: pre-wrap;      /* current browsers */
}

 

See also

{{ CSS_Reference:Text() }}

{{ languages( { "pl": "pl/CSS/white-space" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The<code> white-space </code>CSS property is used to to describe how whitespace inside the element is handled.</p>
<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">white-space:  normal | pre | nowrap | pre-wrap | pre-line | inherit
</pre>
<h3 name="Values">Values</h3>
<dl><dt>{{ Cssxref("normal") }} </dt><dd>All sequences of whitespace and line breaks will be collapsed. Line breaks are add to wrap the content. </dd><dt>{{ Cssxref("pre") }} </dt><dd>All white spaces in the source will be preserved, lines are only broken at newline characters in the source. </dd><dt>{{ Cssxref("nowrap") }} </dt><dd>All sequences of whitespace and line breaks will be collapsed, also line breaks (text wrapping) are suppressed within content. </dd><dt>{{ Cssxref("pre-wrap") }} {{ Fx_minversion_inline("3") }} </dt><dd>All white spaces in the source will be preserved, lines are broken at newline characters and as needed to wrap the content. For backward compatibility with Firefox 2, you may wish to also include <code>-moz-pre-wrap</code>, which does the same thing in older versions of Firefox but is ignored in Firefox 3.5 and later.<br>
</dd><dt>{{ Cssxref("pre-line") }} {{ Fx_minversion_inline("3") }} </dt><dd>All sequences of whitespace will be collapsed, lines are broken at newline characters and also as needed to wrap the content. </dd><dt>{{ Cssxref("inherit") }} </dt><dd>Inherits from parent.</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><h3> Examples</h3>
<pre class="eval">code {
  white-space: pre;
}
</pre>
<h3 name="Notes">Notes</h3>
<p><code>white-space: pre-line </code>is not implemented in Firefox prior to version 3.5 (Gecko 1.9.1).</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS1#white-space">CSS 1 #white-space</a></li> <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>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<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 rowspan="1"><code>nowrap</code></td> </tr> <tr> <td>5.5</td> <td rowspan="1">(*)</td> </tr> <tr> <td>6.0</td> <td rowspan="1"><code>pre</code></td> </tr> <tr> <td><strong>8.0</strong></td> <td rowspan="1"><code>pre-wrap | pre-line</code></td> </tr> <tr> <td rowspan="3" style="border-top: 1px solid gray;">Firefox (Gecko)</td> <td rowspan="1" style="border-top: 1px solid gray;">1.0 (1.0)</td> <td style="border-top: 1px solid gray;"><code>pre | nowrap | -moz-pre-wrap</code></td> </tr> <tr> <td rowspan="1">3.0 (1.9)</td> <td><code>pre-wrap</code></td> </tr> <tr> <td rowspan="1"><strong>3.5</strong> (1.9.1)</td> <td><code>pre-line </code>(<code>-moz-pre-wrap</code> dropped)</td> </tr> <tr> <td rowspan="3" style="border-top: 1px solid gray;">Opera</td> <td rowspan="1" style="border-top: 1px solid gray;">4.0</td> <td style="border-top: 1px solid gray;"><code>pre | nowrap</code></td> </tr> <tr> <td rowspan="1">8.0</td> <td><code>pre-wrap</code></td> </tr> <tr> <td rowspan="1"><strong>9.5</strong></td> <td><code>pre-line</code></td> </tr> <tr> <td rowspan="2" style="border-top: 1px solid gray;">Safari (WebKit)</td> <td rowspan="1" style="border-top: 1px solid gray;">1.0 (85)</td> <td style="border-top: 1px solid gray;"><code>pre | nowrap</code></td> </tr> <tr> <td rowspan="1"><strong>3.0</strong> (522)</td> <td><code>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 class="eval">pre {
      word-wrap: break-word;      /* IE 5.5-7 */
      white-space: -moz-pre-wrap; /* Fx 1.0-2.0 */
      white-space: pre-wrap;      /* current browsers */
}
</pre>
<p> </p><h3 name="See_also">See also</h3>
<p>{{ CSS_Reference:Text() }}<span class="comment"><br>
</span></p>
<p>{{ languages( { "pl": "pl/CSS/white-space" } ) }}</p>
Revert to this revision