X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS white-space Property

The white-space property declares how white space inside the element is handled.

A white space can be a sequence of spaces or a line break.

The white-space property can be applied to any inline content within an element.

Extra specified spaces are collapsed into one, newlines are removed, and lines are broken and wrap where necessary to fit inside their container.

Initial Value baseline
Applies to Inline-level and table-cell elements, also applies to ::first-letter and ::first-line.
Inherited No.
Animatable Yes. The vertical-align is animatable.
Version CSS1
DOM Syntax object.style.whiteSpace = "nowrap";

Syntax

white-space: normal | nowrap | pre | pre-line | pre-wrap | break-space | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      white-space: normal;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.</div>
  </body>
</html>

In this example, the text does not wrap to the next line:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <div> Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.</div>
  </body>
</html>

The difference between "nowrap", "normal" and "pre-wrap" values in one example:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.t1 {
      white-space: nowrap;
      }
      p.t2 {
      white-space: normal;
      }
      p.t3 {
      white-space: pre-wrap;
      }
    </style>
  </head>
  <body>
    <h2>White-space property example</h2>
    <h3>white-space: nowrap;</h3>
    <p class="t1">
      Lorem Ipsum is dummy text. Lorem Ipsum is dummied text.
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text.
      Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: normal;</h3>
    <p class="t2">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text.
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text.
      Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
    <h3>white-space: pre-line;</h3>
    <p class="t3">
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text.
      Lorem Ipsum is dummied text. Lorem Ipsum is dummied text.
      Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
    </p>
  </body>
</html>

Values

Value Description
normal Breaks lines as necessary to fill line boxes. This is the default value of this property.
nowrap With this value the text will never wrap to the next line.
pre Allows to have extra spaces on the line before the first letter of the text.
pre-line Sequences of whitespace collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.
break-space The same behavior as "pre-wrap" except:
  • any sequence of preserved white space always takes up space, including at the end of the line
  • a line breaking opportunity exists after every preserved white space character, including between white space characters
  • such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes
initial Makes the property use its default value.
inherit Inherits the property from its parents element.



Do you find this helpful?

Related articles