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

white-space-collapse

The white-space-collapse CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.

Typography

Overview

The white-space-collapse CSS property sets whether new line characters are shown as line breaks, and whether multiple consecutive spaces are all displayed or combined.

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

Powered by web-features