CSS white-space Property
The white-space property specifies how the white space inside an element is handled. A white space can be a sequence of spaces or a line break.
This property can be applied to any inline content within an element.
Extra specified spaces are collapsed into one, newlines are removed, and lines are broken and wrap where necessary to fit inside their container.
| Initial Value | normal |
|---|---|
| Applies to | Inline-level and table-cell elements, also applies to ::first-letter and ::first-line. |
| Inherited | No. |
| Animatable | Yes. The white-space property is animatable. |
| Version | CSS1 |
| DOM Syntax | object.style.whiteSpace = "nowrap"; |
Syntax
Syntax of CSS white-space Property
css
white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;Example of the white-space property with the "normal" value:
Example of CSS white-space Property with normal value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: normal;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Result
In this example, the text wraps to the next line as necessary.
Example of the white-space property with the "nowrap" value:
Example of CSS white-space Property with nowrap value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>Example of the white-space property with the "pre-line" value:
Example of CSS white-space Property with pre-line value
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
white-space: pre-line;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<div>
Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</div>
</body>
</html>In the next example, you can see the difference between the "nowrap", "normal" and "pre-wrap" values.
Example of the white-space property with three values:
Example of CSS white-space Property with nowrap,normal and pre-wrap values
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.t1 {
white-space: nowrap;
}
p.t2 {
white-space: normal;
}
p.t3 {
white-space: pre-wrap;
}
</style>
</head>
<body>
<h2>White-space property example</h2>
<h3>white-space: nowrap;</h3>
<p class="t1">
Lorem Ipsum is dummy text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: normal;</h3>
<p class="t2">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
<h3>white-space: pre-wrap;</h3>
<p class="t3">
Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is dummied text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
</p>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| normal | Breaks lines as necessary to fill line boxes. This is the default value of this property. | Play it » |
| nowrap | With this value the text will never wrap to the next line. | Play it » |
| pre | Preserves both spaces and line breaks. Text will not wrap to the next line. | Play it » |
| pre-line | Sequences of whitespace collapse into a single whitespace. Text will wrap when necessary, and on line breaks. | Play it » |
| pre-wrap | Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks. | Play it » |
| break-space | The same behavior as "pre-wrap" except: - any sequence of preserved white space always takes up space, including at the end of the line - a line breaking opportunity exists after every preserved white space character, including between white space characters - such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes | |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Practice
What are some of the properties of the 'white-space' value in CSS?