CSS White Space

The CSS white space property is used to specify how to display the content within an element. It is used to handle the white spaces inside an element.

CSS White Space values

There are many white space values that can be used to display the content inside an element.

Value	Description
normal	This is a default value. in this value, text is wrapped when necessary. sequences of white space will collapse into a single whitespace.
nowrap	Sequences of white space will collapse into a single whitespace. in this value, text will never wrap to the next line and only break when <br> tag is used.
pre	Whitespace is preserved by the browser. it is act like html <pre> tag. text will only wrap on line breaks.
pre-line	Sequences of white space will collapse into a single whitespace. texts are wrapped when necessary, and on line break.
pre-wrap	Whitespace is preserved by the browser. texts are wrapped when necessary, and on line break.
initial	It sets this property to its default value.
inherit	It inherits this property from its parent element.

CSS White Space Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
    white-space: nowrap;
}
</style>
</head>
<body>
<p>
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
</p>
</body>
</html>

Test it Now

Next TopicCSS Width

← prev next →