CSS white-space Property

CSS white-space Property

The CSS white-space property controls how spaces, tabs, line breaks, and text wrapping are handled inside an element.

HTML normally collapses consecutive spaces and line breaks into a single space when text is displayed. The white-space property can change this behavior, allowing whitespace to be preserved, wrapping to be prevented, or author-created line breaks to remain visible.

white-space Syntax

The white-space property accepts keyword values that determine whether whitespace is collapsed, whether line breaks are preserved, and whether text is allowed to wrap.

p {
  white-space: nowrap;
}

This rule prevents the text inside matching <p> elements from automatically wrapping onto another line.

white-space Values

Several commonly used white-space values provide different combinations of whitespace handling and text wrapping.

normal and nowrap

The normal value is the initial value of white-space. Consecutive spaces and source line breaks are collapsed, and text automatically wraps when necessary.

.normal {
  white-space: normal;
}

The nowrap value also collapses whitespace, but automatic line wrapping is prevented.

.nowrap {
  white-space: nowrap;
}

When a line using nowrap is wider than its container, the content can overflow unless another CSS property handles the overflow.

pre

The pre value preserves spaces and line breaks from the HTML source. Text does not automatically wrap to fit the available width.

p {
  white-space: pre;
}

This behavior is similar to the whitespace handling normally associated with the HTML <pre> element, although the white-space property can be applied to other elements.

pre-wrap

The pre-wrap value preserves spaces and line breaks while still allowing text to wrap when necessary to fit its container.

p {
  white-space: pre-wrap;
}

This can be useful when the original whitespace should remain visible but long lines still need to fit within the available space.

pre-line

The pre-line value collapses consecutive spaces but preserves line breaks from the source. Text is also allowed to wrap when necessary.

p {
  white-space: pre-line;
}

This provides a useful middle ground when author-created line breaks should remain visible without preserving every space or tab in the source.

Inheriting white-space

The white-space property is inherited. Descendant text normally uses the computed whitespace behavior of its parent unless another CSS rule specifies a different value.

article {
  white-space: pre-wrap;
}

Descendants of the <article> will normally inherit pre-wrap. Because this can affect wrapping and preserved whitespace throughout a section, apply the property to an appropriate container or override it where different behavior is required.

white-space Example

The following example uses pre-wrap so the spaces and line breaks written in the HTML are preserved while the text can still wrap. Open the example in the editor and change pre-wrap to normal, nowrap, pre, or pre-line, then run the code to compare how each value handles the same text.

p {
  white-space: pre-wrap;
}