white-space-collapse CSS property

Baseline 2024 *
Newly available

Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

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.

Syntax

css
/* Keyword values */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;

/* Global values */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;

The white-space-collapse property is specified as a single keyword chosen from the list of values below.

Values

collapse

White space sequences are collapsed.

preserve

White space sequences and segment break characters are preserved.

preserve-breaks

White space sequences are collapsed, while segment break characters are preserved.

preserve-spaces

White space sequences are preserved, while tabs and segment break characters are converted to spaces.

break-spaces

The behavior is identical to preserve, except that:

  • Any sequence of preserved white space always takes up space, including at the end of the line.
  • A line-breaking opportunity exists after every preserved white space character, including between white space characters.
  • Preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes (min-content size and max-content size).

Note: Segment break characters are characters such as line feeds that cause text to break onto new lines.

Note: The CSS text module defines a discard value for the white-space-collapse property to discard all white space in the element, however, this is not supported in any browsers.

Formal definition

Initial valuecollapse
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

white-space-collapse = 
collapse |
discard |
preserve |
preserve-breaks |
preserve-spaces |
break-spaces

Examples

HTML

html
<h2 class="collapse">Default behavior;
  all   whitespace   is   collapsed
  in    the          heading       .</h2>

<h2 class="preserve">In this case
  all   whitespace   is   preserved
  in    the          heading       .</h2>

<h2 class="preserve-breaks">In this case only
  the   line breaks  are  preserved
  in    the          heading       .</h2>

<h2 class="preserve-spaces">In this case only
  the   spaces       are  preserved
  in    the          heading       .</h2>

CSS

css
.collapse {
  white-space-collapse: collapse;
}

.preserve {
  white-space-collapse: preserve;
}

.preserve-breaks {
  white-space-collapse: preserve-breaks;
}

.preserve-spaces {
  white-space-collapse: preserve-spaces;
}

h2 {
  font-size: 1.6rem;
  font-family: monospace;
  border-bottom: 1px dotted #cccccc;
}

Result

Specifications

Specification
CSS Text Module Level 4
# white-space-collapsing

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
white-space-collapse
Chrome – Full support
Chrome 114 (Release date: 2023-05-30)
footnote Full support
Edge – Full support
Edge 114 (Release date: 2023-06-02)
footnote Full support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – Full support
Opera 100 (Release date: 2023-06-29)
footnote Full support
Safari – Full support
Safari 17.4 (Release date: 2024-03-05)
footnote Full support
Chrome Android – Full support
Chrome Android 114 (Release date: 2023-05-30)
footnote Full support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – Full support
Opera Android 76 (Release date: 2023-06-26)
footnote Full support
Safari on iOS – Full support
Safari on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
Samsung Internet – Full support
Samsung Internet 23 (Release date: 2023-10-18)
footnote Full support
WebView Android – Full support
WebView Android 114 (Release date: 2023-05-30)
footnote Full support
WebView on iOS – Full support
WebView on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
break-spaces
Chrome – Full support
Chrome 114 (Release date: 2023-05-30)
footnote Full support
Edge – Full support
Edge 114 (Release date: 2023-06-02)
footnote Full support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – Full support
Opera 100 (Release date: 2023-06-29)
footnote Full support
Safari – Full support
Safari 17.4 (Release date: 2024-03-05)
footnote Full support
Chrome Android – Full support
Chrome Android 114 (Release date: 2023-05-30)
footnote Full support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – Full support
Opera Android 76 (Release date: 2023-06-26)
footnote Full support
Safari on iOS – Full support
Safari on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
Samsung Internet – Full support
Samsung Internet 23 (Release date: 2023-10-18)
footnote Full support
WebView Android – Full support
WebView Android 114 (Release date: 2023-05-30)
footnote Full support
WebView on iOS – Full support
WebView on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
collapse
Chrome – Full support
Chrome 114 (Release date: 2023-05-30)
footnote Full support
Edge – Full support
Edge 114 (Release date: 2023-06-02)
footnote Full support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – Full support
Opera 100 (Release date: 2023-06-29)
footnote Full support
Safari – Full support
Safari 17.4 (Release date: 2024-03-05)
footnote Full support
Chrome Android – Full support
Chrome Android 114 (Release date: 2023-05-30)
footnote Full support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – Full support
Opera Android 76 (Release date: 2023-06-26)
footnote Full support
Safari on iOS – Full support
Safari on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
Samsung Internet – Full support
Samsung Internet 23 (Release date: 2023-10-18)
footnote Full support
WebView Android – Full support
WebView Android 114 (Release date: 2023-05-30)
footnote Full support
WebView on iOS – Full support
WebView on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
preserve
Chrome – Full support
Chrome 114 (Release date: 2023-05-30)
footnote Full support
Edge – Full support
Edge 114 (Release date: 2023-06-02)
footnote Full support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – Full support
Opera 100 (Release date: 2023-06-29)
footnote Full support
Safari – Full support
Safari 17.4 (Release date: 2024-03-05)
footnote Full support
Chrome Android – Full support
Chrome Android 114 (Release date: 2023-05-30)
footnote Full support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – Full support
Opera Android 76 (Release date: 2023-06-26)
footnote Full support
Safari on iOS – Full support
Safari on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
Samsung Internet – Full support
Samsung Internet 23 (Release date: 2023-10-18)
footnote Full support
WebView Android – Full support
WebView Android 114 (Release date: 2023-05-30)
footnote Full support
WebView on iOS – Full support
WebView on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
preserve-breaks
Chrome – Full support
Chrome 114 (Release date: 2023-05-30)
footnote Full support
Edge – Full support
Edge 114 (Release date: 2023-06-02)
footnote Full support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – Full support
Opera 100 (Release date: 2023-06-29)
footnote Full support
Safari – Full support
Safari 17.4 (Release date: 2024-03-05)
footnote Full support
Chrome Android – Full support
Chrome Android 114 (Release date: 2023-05-30)
footnote Full support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – Full support
Opera Android 76 (Release date: 2023-06-26)
footnote Full support
Safari on iOS – Full support
Safari on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
Samsung Internet – Full support
Samsung Internet 23 (Release date: 2023-10-18)
footnote Full support
WebView Android – Full support
WebView Android 114 (Release date: 2023-05-30)
footnote Full support
WebView on iOS – Full support
WebView on iOS 17.4 (Release date: 2024-03-05)
footnote Full support
preserve-spaces
Experimental
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – No support
Opera
footnote No support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

See also