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.
Die white-space-collapse CSS Eigenschaft steuert, wie Leerraum innerhalb eines Elements zusammengefasst wird.
Hinweis:
Die Eigenschaften white-space-collapse und text-wrap-mode können gemeinsam mit der Abkürzungs-Eigenschaft white-space deklariert werden.
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;
Die Eigenschaft white-space-collapse wird als ein einzelnes Schlüsselwort aus der unten stehenden Werteliste angegeben.
Werte
collapse-
Leerraumsequenzen werden zusammengefasst.
preserve-
Leerraumsequenzen und Segmenttrennzeichen werden beibehalten.
preserve-breaks-
Leerraumsequenzen werden zusammengefasst, während Segmenttrennzeichen beibehalten werden.
preserve-spaces-
Leerraumsequenzen werden beibehalten, während Tabs und Segmenttrennzeichen in Leerzeichen umgewandelt werden.
break-spaces-
Das Verhalten ist identisch mit
preserve, außer dass:- Jede beibehaltene Leerraumsequenz immer Platz einnimmt, auch am Ende der Zeile.
- Eine Möglichkeit zum Zeilenumbruch nach jedem beibehaltenen Leerzeichen besteht, auch zwischen Leerraumzeichen.
- Beibehaltene Leerzeichen nehmen Platz ein und hängen nicht, wodurch die intrinsischen Größen des Kastens (
min-contentGröße undmax-contentGröße) beeinflusst werden.
Hinweis:>Segmenttrennzeichen sind Zeichen wie Zeilenumbrüche, die den Text auf neue Zeilen brechen lassen.
Hinweis:
Das CSS Text Modul definiert einen discard Wert für die white-space-collapse Eigenschaft, um alle Leerzeichen im Element zu verwerfen, jedoch wird dies in keinem Browser unterstützt.
Formale Definition
| Anfangswert | collapse |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
white-space-collapse =
collapse |
discard |
preserve |
preserve-breaks |
preserve-spaces |
break-spaces
Beispiele
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;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Text Module Level 4 # white-space-collapsing |
Browser-Kompatibilität
Siehe auch
- Abkürzung für
white-space-collapseundtext-wrap-mode: Die Eigenschaftwhite-space. - CSS Text Modul
- Umgang mit Leerraum in CSS