CSS White Space
The CSS white space is used to handle the white spaces inside an element. It specifies how the text written inside an element will be displayed.
White Space values
| Value | Description |
|---|---|
| normal | It is the default value. Text is wrapped whenever necessary, multiple white-space will collapse into a single one. |
| nowrap | Sequence of white space will collapse into a single whitespace. No text wrapping. Line only breaks when <br> tag is used. |
| pre | Whitespaces are preserved. It acts like HTML <pre> tag. Lines are only broken at newline characters in the source or at <br> tag. |
| pre-line | Multiple white spaces will collapse into a single one. Text is broken at newline characters, at <br>, and when necessary. |
| pre-wrap | Whitespaces are preserved. Text is broken at newline characters, at <br>, and when necessary. |
| initial | It sets this property to its default value. |
| inherit | It inherits the property from its parent element. |
Example
Try this code »
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS White Space </title>
<meta charset="UTF-8">
<style>
p.nowrap {
white-space: nowrap;
}
p.normal {
white-space: normal;
}
p.pre {
white-space: pre;
}
</style>
</head>
<body>
<h1>The white-space Property</h1>
<h2>white-space: nowrap:</h2>
<p class="nowrap">
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>
<h2>white-space: normal:</h2>
<p class="normal">
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>
<h2>white-space: pre:</h2>
<p class="pre">
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>
<html lang="en">
<head>
<title> CSS White Space </title>
<meta charset="UTF-8">
<style>
p.nowrap {
white-space: nowrap;
}
p.normal {
white-space: normal;
}
p.pre {
white-space: pre;
}
</style>
</head>
<body>
<h1>The white-space Property</h1>
<h2>white-space: nowrap:</h2>
<p class="nowrap">
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>
<h2>white-space: normal:</h2>
<p class="normal">
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>
<h2>white-space: pre:</h2>
<p class="pre">
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>
Output
white-space: nowrap:
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
white-space: normal:
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.
white-space: pre:
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.
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
white-space |
Recommended :