Newly available Useful when white-space-collapse affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.

white-space-collapse

The white-space-collapse CSS property controls how white space inside an element is collapsed.

Note: The white-space-collapse and text-wrap-mode properties can be declared together using the white-space shorthand property.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
white-space-collapse
114
114
124
17.4
114
17.4
break-spaces
114
114
124
17.4
114
17.4
collapse
114
114
124
17.4
114
17.4
preserve
114
114
124
17.4
114
17.4
preserve-breaks
114
114
124
17.4
114
17.4
preserve-spaces
Experimental
124
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Preserve whitespace */
pre {
  white-space-collapse: preserve;
  text-wrap: nowrap;
}

/* Preserve line breaks only */
.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

Live demo

Collapse(default)

white-space-collapse Collapse(default) demo.

PreviewFullscreen

Preserve(retain)

white-space-collapse Preserve(retain) demo.

PreviewFullscreen

preserve-breaks

white-space-collapse Preserve-breaks demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use white-space-collapse to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links