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.