W3cubDocs

/CSS

white-space-collapse

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

/* 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 value	`collapse`
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

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

Examples

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

.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`	114	114	124	100	17.4	114	124	76	17.4	23.0	114	17.4
`break-spaces`	114	114	124	100	17.4	114	124	76	17.4	23.0	114	17.4
`collapse`	114	114	124	100	17.4	114	124	76	17.4	23.0	114	17.4
`preserve`	114	114	124	100	17.4	114	124	76	17.4	23.0	114	17.4
`preserve-breaks`	114	114	124	100	17.4	114	124	76	17.4	23.0	114	17.4
`preserve-spaces`	No	No	124	No	No	No	124	No	No	No	No	No