CSS white-space Property

The CSS white-space property defines how white-space inside an element is handled.

Demo:

Syntax:

white-space: normal|nowrap|pre|pre-line|pre-wrap;

normal (default) – text will wrap when necessary.

nowrap – text will never wrap to the next line (the text continues on the same line until a </br> tag is encountered).

pre – text will only wrap on line breaks (like the <pre>
tag in HTML).

pre-line – text will wrap when necessary, and on line breaks.

pre-wrap – text will wrap when necessary, and on line breaks.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.one {
  white-space: nowrap;
}

.two {
  white-space: normal;
}

.three {
  white-space: pre;
}
</style>
</head>
<body>

<h4>white-space: nowrap;</h4>
<p class="one">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate, justo nec vulputate tempus, purus lectus ullamcorper lacus, cursus euismod ligula augue quis lectus. Praesent tincidunt ultricies ante, vel ullamcorper ante ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p>

<h4>white-space: normal;</h4>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate, justo nec vulputate tempus, purus lectus ullamcorper lacus, cursus euismod ligula augue quis lectus. Praesent tincidunt ultricies ante, vel ullamcorper ante ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p>

<h4>white-space: pre;</h4>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam vulputate, justo nec vulputate tempus, purus lectus ullamcorper lacus,
cursus euismod ligula augue quis lectus. 
    
Praesent tincidunt ultricies ante, vel ullamcorper ante ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p>

</body>
</html>

Output:

white-space: nowrap;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate, justo nec vulputate tempus, purus lectus ullamcorper lacus, cursus euismod ligula augue quis lectus. Praesent tincidunt ultricies ante, vel ullamcorper ante ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

white-space: normal;

white-space: pre;

Enjoy coding!

white-space: nowrap;

white-space: normal;

white-space: pre;

Share this: