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-contentsize andmax-contentsize).
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
See also
- Shorthand for
white-space-collapseandtext-wrap-mode: Thewhite-spaceproperty. - CSS text module
- Handling whitespace in CSS