Different Types of Whitespace in CSS

Here's a rundown of all the CSS white-space values with live-rendered examples:

Collapses multiple spaces/tabs into one. Line breaks in HTML are ignored. Text wraps at the container edge.

p { white-space: normal; }

Collapses whitespace like normal, but never wraps — text overflows the container.

.badge { white-space: nowrap; }

Great for: buttons, tags, single-line labels.

Preserves all whitespace and newlines exactly as written (like an old <pre> tag). Does not wrap.

code { white-space: pre; }

Great for: code blocks, ASCII art, aligned columns.

Like pre — preserves spaces and newlines — but does wrap when hitting the container edge.

textarea { white-space: pre-wrap; }

Great for: user-generated content, chat messages, multiline inputs.

A middle ground: collapses extra spaces, but preserves explicit newlines (\n) and wraps normally.

.poem { white-space: pre-line; }

Great for: poetry, addresses, content where only line breaks matter.

Like pre-wrap, but trailing spaces at the end of a line also wrap instead of hanging invisibly.

.editor { white-space: break-spaces; }

Mostly useful for text editors where space position accuracy matters.

Value	Collapses spaces	Preserves `\n`	Wraps
`normal`	✅	❌	✅
`nowrap`	✅	❌	❌
`pre`	❌	✅	❌
`pre-wrap`	❌	✅	✅
`pre-line`	✅	✅	✅
`break-spaces`	❌	✅	✅ + trailing spaces

The most commonly useful ones day-to-day are nowrap, pre-wrap, and pre-line. Let me know if you want to dig into any of them!