CSS white-space

The CSS white-space property is used to handle white space inside an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{white-space: pre;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing
      elit. Consequuntur veniam porro deserunt, magnam
      impedit sed hic atque? Autem officiis, odio,
      dignissimos excepturi possimus provident esse ullam
      explicabo labore ex neque.</p>

</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur veniam porro deserunt, magnam impedit sed hic atque? Autem officiis, odio, dignissimos excepturi possimus provident esse ullam explicabo labore ex neque.

As you can see, using the pre, the output of content inside the p (paragraph) is displayed in pre-formatted (as it is) way.

CSS white-space Syntax

The syntax of white-space property in CSS, is:

white-space: x;

The value of x should be any of the following:

normal - used to wrap the text when needed. This is the default value
nowrap - used not to wrap the text. The text continues on same line without caring the length
pre - used to produce pre-formatted or as it is text
pre-line - similar to pre, but indented white spaces are removed
pre-wrap - used to apply the mixture of pre and normal
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS white-space Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .a{white-space: normal;}
      .b{white-space: nowrap;}
      .c{white-space: pre;}
      .d{white-space: pre-line;}
      .e{white-space: pre-wrap;}
   </style>
</head>
<body>
   
   <h2>white-space: normal</h2>
   <p class="a">Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Soluta tempore ut sed illo recusandae velit est blanditiis
      repudiandae accusantium. In asperiores voluptas necessitatibus
      laborum nostrum voluptatibus quam? Suscipit, culpa. Alias velit
      unde.</p>
   
   <h2>white-space: nowrap</h2>
   <p class="b">Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Soluta tempore ut sed illo recusandae velit est blanditiis
      repudiandae accusantium. In asperiores voluptas necessitatibus
      laborum nostrum voluptatibus quam? Suscipit, culpa. Alias velit
      unde.</p>
   
   <h2>white-space: pre</h2>
   <p class="c">Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Soluta tempore ut sed illo recusandae velit est blanditiis
      repudiandae accusantium. In asperiores voluptas necessitatibus
      laborum nostrum voluptatibus quam? Suscipit, culpa. Alias velit
      unde.</p>
   
   <h2>white-space: pre-line</h2>
   <p class="d">Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Soluta tempore ut sed illo recusandae velit est blanditiis
      repudiandae accusantium. In asperiores voluptas necessitatibus
      laborum nostrum voluptatibus quam? Suscipit, culpa. Alias velit
      unde.</p>
   
   <h2>white-space: pre-wrap</h2>
   <p class="e">Lorem ipsum dolor
      sit amet consectetur
      adipisicing elit. Soluta tempore ut sed illo recusandae velit est blanditiis repudiandae accusantium. In asperiores voluptas necessitatibus laborum nostrum voluptatibus quam? Suscipit, culpa. Alias velit unde. Lorem ipsum dolor sit amet consectetur,
      adipisicing elit?</p>

</body>
</html>

Output

white-space: normal

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta tempore ut sed illo recusandae velit est blanditiis repudiandae accusantium. In asperiores voluptas necessitatibus laborum nostrum voluptatibus quam? Suscipit, culpa. Alias velit unde.