white-space in CSS: understanding why your spaces disappear

Type three spaces in a row in an HTML file, or break a paragraph across several lines to keep the source code readable: the browser still displays a single space, as if none of that ever happened. This behavior, often discovered by surprise, is controlled by a single property: white-space.

It decides how spaces, tabs, and line breaks from the source code are treated at display time, and whether text is allowed to wrap onto a new line once it exceeds the available width.

Definition

white-space controls two distinct behaviors: collapsing consecutive whitespace into a single space, and automatically wrapping text onto a new line once it reaches the edge of its box.

p {
  white-space: normal; /* default behavior */
}

.label {
  white-space: nowrap; /* never wraps to a new line */
}

The default behavior: collapsing whitespace

With normal, the default value for any element, the browser applies two rules at once: it collapses any run of spaces, tabs, and line breaks from the source code into a single visible space, and it automatically wraps text onto the next line once it exceeds the width of its box.

<!-- In the HTML -->
<p>Hello        world</p>

<!-- What renders: "Hello world", a single space -->

That collapsing is exactly what lets you freely indent your HTML for readability, without worrying that the indentation spaces will actually show up on screen.

The other values and their use

Each value combines the two behaviors differently: collapse or preserve whitespace, allow or forbid automatic wrapping.

pre reproduces the behavior of the <pre> tag, useful for displaying a code block where every space and every line break in the source actually matters. pre-line is rarer but handy for text typed by a visitor into a field, where only their intentional line breaks should be respected, without keeping multiple spaces.

nowrap, the first step toward truncated text

white-space: nowrap; forbids any wrapping, forcing text to continue on a single line even if it far exceeds the width of its box. Used alone, this value simply makes the text overflow visually.

Best practices

Reserve pre and its variants for content where the source text's formatting genuinely matters, like a code snippet or preformatted text sent by an external system. For regular editorial content, normal remains the right default, with nowrap added selectively on a specific element, like a label that should never break across two lines.

Frequently asked questions

That is the default behavior of white-space: normal;, inherited by every element that specifies nothing. The browser systematically collapses any run of spaces into one, which is exactly what lets the source code be freely indented without affecting the final rendered output.

The HTML entity  , the non-breaking space, is not treated as an ordinary space by the browser and escapes the collapsing. It is the classic way to keep two words glued together on the same line, for example a number and its unit, without changing the value of white-space.

pre preserves spacing and forbids any automatic wrapping, which makes the text overflow if a line is too long. pre-wrap preserves the same spacing, but allows text to wrap so it stays inside its box, an often preferable compromise for displaying a code block on mobile.

No, used alone, this value makes the text overflow its box instead of cutting it off. Actually truncating text with an ellipsis requires combining three properties together, overflow, white-space and text-overflow and ellipsis.