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:

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.

white-space: nowrap

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.

white-space: pre

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.

white-space: pre-line

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.

white-space: pre-wrap

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?

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!