totn CSS

CSS: white-space property

This CSS tutorial explains how to use the CSS property called white-space with syntax and examples.

Description

The CSS white-space property defines how to handle whitespace within an element.

Syntax

The syntax for the white-space CSS property is:

white-space: value;

Parameters or Arguments

value

Determines how to handle whitespace inside of an element. It can be one of the following:

Value Description
normal Whitespace is collapsed. Newline characters are treated as whitespace and collapsed. Text wrapping is allowed.
p { white-space: normal; }
pre Whitespace is preserved. Lines are broken by newline characters. Text wrapping is not allowed.
p { white-space: pre; }
nowrap Whitespace is collapsed. No line breaks. Text wrapping is not allowed.
p { white-space: nowrap; }
pre-wrap Whitespace is preserved. Lines are broken by newline characters. Text wrapping is allowed.
p { white-space: pre-wrap; }
pre-line Whitespace is collapsed. Lines are broken by newline characters and to fill line boxes. Text wrapping is allowed.
p { white-space: pre-line; }
inherit Element will inherit the white-space from its parent element
p { white-space: inherit; }

Note

Browser Compatibility

The CSS white-space property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
    • normal: IE 5.5+
    • pre: IE 6+
    • nowrap: IE 6+
    • pre-wrap: IE 8+
    • pre-line: IE 8+
  • Opera
    • normal: Opera 4+
    • pre: Opera 4+
    • nowrap: Opera 4+
    • pre-wrap: Opera 8+
    • pre-line: Opera 9.5+
  • Safari (WebKit)

Example

We will discuss the white-space property below, exploring examples of how to use this property in CSS.

Normal

Let's look at an example where we set the white-space property to normal.

The CSS would look like this:

div { background: lightgreen; width: 325px; }

p { white-space: normal; }

The HTML would look like this:

<div>
  <p>This        paragraph was written by techonthenet.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>

The result would look like this:

CSS

In this CSS example, the white-space property is set to normal. This means that whitespace is collapsed, new line characters are treated as whitespace and collapsed, and text wrapping is allowed.

Pre

Now let's look at what happens when we set the white-space property to pre.

The CSS would look like this:

div { background: lightgreen; width: 325px; }

p { white-space: pre; }

The HTML would look like this:

<div>
  <p>This        paragraph was written by techonthenet.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>

The result would look like this:

CSS

In this CSS white-space example, the white-space property is set to pre. This means that whitespace is preserved, new line characters are preserved, and text wrapping is not allowed.

Nowrap

Now let's look at what happens when we set the white-space property to nowrap.

The CSS would look like this:

div { background: lightgreen; width: 325px; }

p { white-space: nowrap; }

The HTML would look like this:

<div>
  <p>This        paragraph was written by techonthenet.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>

The result would look like this:

CSS

In this CSS example, the white-space property is set to nowrap. This means that whitespace is collapsed, new line characters are collapsed, and text wrapping is not allowed.

Pre-Wrap

Now let's look at what happens when we set the white-space property to pre-wrap.

The CSS would look like this:

div { background: lightgreen; width: 325px; }

p { white-space: pre-wrap; }

The HTML would look like this:

<div>
  <p>This        paragraph was written by techonthenet.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>

The result would look like this:

CSS

In this CSS example, the white-space property is set to pre-wrap. This means that whitespace is preserved, new line characters are preserved, and text wrapping is allowed.

Pre-Line

Now let's look at what happens when we set the white-space property to pre-line.

The CSS would look like this:

div { background: lightgreen; width: 325px; }

p { white-space: pre-line; }

The HTML would look like this:

<div>
  <p>This        paragraph was written by techonthenet.com.<br>
It should demonstrate the white-space property in CSS.</p>
</div>

The result would look like this:

CSS

In this CSS example, the white-space property is set to pre-line. This means that whitespace is collapsed, new line characters are preserved, and text wrapping is allowed.

Share on: