CSS White Space

To define the way to display the content and to handle the white spaces within an element, the CSS White Space is used.

CSS White Space Values:

Value Uses
normal Used to wrap a text when necessary. White space’s sequences collapse into a single whitespace.
nowrap Used to never wrap a text to the next line. The text breaks when <br> tag is used. White space’s sequences collapse into a single whitespace.
pre Used to wrap a text only on line breaks. The browser preserves the whitespace.
pre-line Used to wrap a text when necessary, and on a line break. White space’s sequences collapse into a single whitespace.
pre-wrap Used to wrap a text when necessary, and on a line break. The browser preserves the whitespace.
initial Used to set this property to its default value.
inherit Used to inherit this property from its parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: pre-wrap;
}
</style>
</head>
<body>
<p>
Hello World!!
Hello World!!
Hello World!!
Hello World!!
Hello World!!
</p>
</body>
</html>

Explanation:

In the above example, we are using the pre-wrap with CSS white-space property to wrap a text when necessary, and on line break. The whitespace is thus preserved.