Widely available Useful whenever content needs predictable wrapping or preserved spacing. Choose the mode that matches the reading task rather than styling by trial and error.

white-space

The white-space CSS property sets how white space inside an element is handled.

TypographyWrappingWhitespace

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
white-space
1
12
1
1
18
1
break-spaces
76
79
69
13.1
76
13.4
normal
1
12
1
1
18
1
nowrap
1
12
1
1
18
1
pre
1
12
1
1
18
1
pre-line
1
12
3.5
3
18
1
pre-wrap
1
12
3
3
18
1
shorthand values

Accepts shorthand values
114
114
124
114
svg elements

On SVG elements
12
36
textarea support

Support on `<textarea>`
1
12
36
1
18
1
Other
svg.global_attributes.white-space

The white-space SVG attribute specifies how whitespace within text should be handled. This includes whether and how white space inside the element is collapsed and whether lines may wrap at unforced soft wrap opportunities.
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (3.6)
Compatibility
  • Available with a vendor prefix: -moz- (1)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only accepts values for `white-space-collapse` and `text-wrap-mode`, not `white-space-trim`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only accepts values for `white-space-collapse` and `text-wrap-mode`, not `white-space-trim`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only accepts values for `white-space-collapse` and `text-wrap-mode`, not `white-space-trim`.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Only accepts values for `white-space-collapse` and `text-wrap-mode`, not `white-space-trim`.
Notes 1 item(s)
Removed
  • This feature was removed in a later browser version (79)

Syntax

CSS 
.nowrap { white-space: nowrap; }
.preserve { white-space: pre-wrap; }
code { white-space: pre; }

Live demo

Nowrap(wrap none)

CSS Nowrap(wrap none) demo.

PreviewFullscreen

Pre-wrap(emptywhiteretain)

CSS Pre-wrap(emptywhiteretain) demo.

PreviewFullscreen

Pre(equalwidthdisplay)

CSS Pre(equalwidthdisplay) demo.

PreviewFullscreen

Use cases

  • Code and preformatted text

    Preserve spacing and line breaks in snippets, logs, or message previews where exact text layout matters.

  • Controlled wrapping

    Keep badges, labels, or compact cards readable by deciding whether text should wrap, collapse, or stay on one line.

Cautions

  • Aggressive nowrap usage can easily cause overflow on small screens.
  • Preserving whitespace improves fidelity, but it can also surface unwanted spacing from source markup.

Accessibility

  • Readable line wrapping is important for zoomed layouts and narrow viewports.
  • Do not force horizontal scrolling for ordinary prose when simple wrapping would keep the content usable.

Related links