CSS White Space

CSS White Space

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

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; }

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {
    white-space: pre-wrap;
}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Try it with the Editor

Note: Now you can change the value and see the different type of output.