Codectionary / Developer documentation / CSS

Preserving and Wrapping Whitespace

white-space controls whether spaces and line breaks are collapsed and whether lines wrap. pre preserves spacing without ordinary wrapping, while pre-wrap preserves spacing and still allows wrapping. This is useful for notes, logs, and user text where line breaks carry meaning.

Syntax

.note { white-space: pre-wrap; }

Examples

Preserving and Wrapping Whitespace: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.note { white-space: pre-wrap; max-width: 22rem; border: 1px solid; padding: 1rem; }
  1. Expected result: The line breaks and four-space indentation remain visible, and the longer sentence can wrap.
  2. Ordinary normal whitespace would collapse the authored line breaks and spaces.
  3. pre-wrap preserves the text structure without forcing a single wide line.
HTML used by this example

<div class="note">First line
    Indented second line
A longer sentence that can wrap within the available width.</div>

Best practices

  • Use pre and code for code semantics, then choose suitable wrapping styles.
  • Handle unbroken identifiers separately with overflow-wrap when necessary.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading