white-space

white-space controls whitespace collapsing and whether lines can wrap. Modern CSS defines it as a shorthand for white-space-collapse and text-wrap-mode; familiar legacy keywords still provide useful combinations.

Compare normal with pre-wrap

Both boxes contain the same spaces and newline. Normal collapses those source characters; pre-wrap preserves them and still wraps when the line becomes too wide.

<div class="sample normal">First    line
Second    line with more words to wrap</div>
<div class="sample preserved">First    line
Second    line with more words to wrap</div>

.sample {
  max-width: 16rem;
  padding: 0.5rem;
  background: #eff6ff;
  margin-block: 0.5rem;
}
.normal {
  white-space: normal;
}
.preserved {
  white-space: pre-wrap;
}

Preserve notes without forcing page overflow

Pre-wrap keeps intentional line breaks. Overflow-wrap:anywhere supplies an emergency break for an otherwise unbreakable identifier. Both settings matter.

<p class="note">Bring a notebook.
Registration: workshopregistrationidentifierwithoutspaces
Change one value at a time.</p>

.note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 20rem;
  padding: 0.75rem;
  background: #eff6ff;
}

Values and defaults

The initial value is normal and the property is inherited. Normal collapses ordinary spaces/tabs and permits wrapping. Nowrap still collapses spaces; it prevents soft wrapping. Pre preserves spaces and source breaks without soft wrapping. Pre-wrap preserves both and allows wrapping; pre-line keeps source breaks but collapses runs of spaces.

Break-spaces preserves spaces with additional breaking opportunities, including after preserved spaces, and affects intrinsic sizing differently from pre-wrap. New two-keyword combinations have separate support from established legacy values.

Common mistakes

Nowrap does not preserve all whitespace. A preformatted box can overflow a narrow viewport; use wrapping or a deliberate scroll region rather than clipping useful code. Normal whitespace handling also depends on language and segment-break processing, so use br only when a line break has actual meaning.

Learn overflow-wrap, pre, tab-size, and text-overflow.

Sources and browser support

MDN: white-space describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.