CSS white-space Property

The white-space property handles white-space inside an element.

It specifies whether white-space should collapse (into a single space).

And whether lines should wrap at the end of a line.

Example

#

Text with a white-space value of pre-line.
The text will wrap when necessary and on line breaks.

This text is formatted using white-space property. This text is formatted
using white-space property. This text is formatted using white-space property.

<style>
  .white-space-pre {
    max-width: 250px;
    border: 2px solid lightblue;
    white-space: pre-line;
  }
</style>

<p class="white-space-pre">
  This text is formatted using white-space property.
  This text is formatted<br />using white-space property.
  This text is formatted using white-space property.
</p>

Syntax

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

Values

#

Value Description
normal Default. Collapses multiple whitespace characters into a single whitespace.
Text will wrap when necessary.
nowrap Collapses multiple whitespace characters into a single whitespace.
The text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Browser preserves whitespace.
The text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Collapses multiple whitespace characters into a single whitespace.
The text will wrap when necessary, and on line breaks
pre-wrap Browser preserves whitespace.
The text will wrap when necessary, and on line breaks.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different white-space values.

This text is formatted using the white-space property. This text is formatted using the white-space property. This text is formatted using the white-space property. This text is formatted using the white-space property.

<style>
  .white-space-example {
    max-width: 350px;
    border: solid 2px lightblue;
    white-space: normal;
  }
</style>

<p class="white-space-example">
  This text is formatted using the white-space property.
  This text is formatted using the white-space property.
  This text is formatted using the white-space property.
  This text is formatted using the white-space property.
</p>

Browser support

This table shows when white-space support started for each browser.

Chrome
1.0 Dec 2008
Firefox
3.5 Jun 2009
IE/Edge
8.0 Mar 2009
Opera
9.5 Jun 2008
Safari
3.0 Jun 2007

You may also like

Guides