CSS white-space Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The white-space property controls how whitespace characters (spaces, tabs and line breaks) inside an element are treated by the layout engine. At a basic level it decides whether sequences of whitespace are collapsed into a single space or preserved exactly as in the source, whether explicit newlines in the source create line breaks in the rendered output, and whether text is permitted to wrap at normal breaking opportunities. Because those behaviors change how and where line boxes are formed, this property has a direct effect on the visual flow and measured width of text content.

Because it governs both collapsing and wrapping behavior, white-space frequently interacts with other text-wrapping and breaking controls: for example, overflow-wrap and word-break determine how very long words or unbroken strings are handled when wrapping is allowed, while text-overflow is often used where preventing wrapping causes content to be clipped or ellipsized. In practice, changing how whitespace is handled can turn an element that naturally reflows into one that overflows its container (or vice versa), so it’s important to consider how it combines with overflow, width, and layout constraints.

Common use cases include preserving formatting for preformatted text and code samples, ensuring labels/buttons remain on a single line, or keeping specific spacing for typographic or layout reasons. Because it changes break opportunities, the property also affects user interactions like text selection and copy/paste (what exact whitespace is captured), and it can influence layout stability — unwrapped inline content can introduce horizontal scrolling or unexpected shifts if container sizes aren’t managed. When adjusting whitespace behavior, consider both the visual outcome and how the change will interact with the rest of your layout rules.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.whiteSpace

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

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

Values

normalSequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
preLine breaks and other whitespace are preserved.
nowrapLike normal, this value collapses white space; but like pre, it does not allow wrapping.
pre-lineLike normal, this value collapses consecutive spaces and allows wrapping, but preserves segment breaks in the source as forced line breaks.
pre-wrapLike pre, this value preserves white space; but like normal, it allows wrapping.
inherit

Example

HTML

<div class='container'>

  <h2>CSS white-space examples</h2>

  <div class='grid'>

    <div class='item'>

      <h3>normal</h3>

      <div class='box ws-normal'>

        This    is    an    example    with    multiple    spaces. Line breaks

        are shown as a single space and long-words break: Supercalifragilisticexpialidocious

      </div>

    </div>



    <div class='item'>

      <h3>nowrap</h3>

      <div class='box ws-nowrap'>

        This    is    an    example    with    multiple    spaces. Line breaks

        are not wrapped; the long-words won't break: Supercalifragilisticexpialidocious

      </div>

    </div>



    <div class='item'>

      <h3>pre</h3>

      <pre class='box ws-pre'>

This    is    an    example    with    multiple    spaces. Line breaks

are preserved exactly.

        Indentation is preserved too.

      </pre>

    </div>



    <div class='item'>

      <h3>pre-wrap</h3>

      <div class='box ws-prewrap'>

        This    is    an    example    with    multiple    spaces. Line breaks

        are preserved and text will wrap when needed: Supercalifragilisticexpialidocious

      </div>

    </div>



    <div class='item'>

      <h3>pre-line</h3>

      <div class='box ws-preline'>

        This    is    an    example    with    multiple    spaces. Line breaks

        are preserved, but multiple spaces are collapsed.

      </div>

    </div>

  </div>

</div>

CSS

.container {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 20px;
  color: #222;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.item h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.box {
  border: 1px solid #ddd;
  padding: 12px;
  min-height: 80px;
  background: #fafafa;
  font-size: 14px;
  line-height: 1.4;
}

.ws-normal {
  white-space: normal;
}

.ws-nowrap {
  white-space: nowrap;
  overflow: auto;
}

.ws-pre {
  white-space: pre;
}

.ws-prewrap {
  white-space: pre-wrap;
}

.ws-preline {
  white-space: pre-line;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS white-space property. Hover over a browser icon to see the version that first introduced support for this CSS property.