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 collapses into a single whitespace.
nowrap Used to never wrap a text to the next line. Text breaks when <br> tag is used. White space’s sequences collapses 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 line break. White space’s sequences collapses into a single whitespace.
pre-wrap Used to wrap a text when necessary, and on 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>

Output:

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.

Please Share