Advertisement

Advertisement


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.

<!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>

Output

CSS White Space

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

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
white-space
8.1
1.1
3.5
9.5
3.0








Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.