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
-Eigenschaft von CSS steuert, wie Leerraum innerhalb eines Elements zusammengefasst wird.
Hinweis:
Die Eigenschaften white-space-collapse
und text-wrap-mode
können zusammen mit der Abkürzungseigenschaft white-space
erklärt 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 white-space-collapse
-Eigenschaft wird als ein einzelnes Stichwort aus der untenstehenden Werteliste angegeben.
Werte
collapse
-
Leerraumsequenzen werden zusammengefasst.
preserve
-
Leerraumsequenzen und Segmentumbruchzeichen werden beibehalten.
preserve-breaks
-
Leerraumsequenzen werden zusammengefasst, während Segmentumbruchzeichen beibehalten werden.
preserve-spaces
-
Leerraumsequenzen werden beibehalten, während Tabulatoren und Segmentumbruchzeichen in Leerzeichen umgewandelt werden.
break-spaces
-
Das Verhalten ist identisch zu
preserve
, außer dass:- Jede Sequenz von beibehaltenem Leerraum nimmt immer Platz ein, auch am Ende der Zeile.
- Eine Umbruchsmöglichkeit besteht nach jedem beibehaltenen Leerraumzeichen, auch zwischen Leerraumzeichen.
- Beibehaltene Leerzeichen nehmen Platz ein und hängen nicht, was die intrinsischen Größen der Box beeinflusst (
min-content
-Größe undmax-content
-Größe).
Hinweis: Segmentumbruchzeichen sind Zeichen wie Zeilenumbrüche, die dazu führen, dass der Text auf neue Zeilen umbricht.
Hinweis:
Das CSS-Text-Modul definiert einen discard
-Wert für die white-space-collapse
-Eigenschaft, welcher allen Leerraum im Element verwirft, allerdings wird dies von keinem Browser unterstützt.
Zusammenfassen von Leerraum
Benutzeragenten handhaben das Zusammenfassen von Leerraum wie folgt:
- Tabulatoren werden im Allgemeinen in Leerzeichen umgewandelt.
- Wenn Segmentumbrüche zusammengefasst werden sollen:
- Sequenzen von Segmentumbrüchen werden zu einem einzigen Segmentumbruch zusammengefasst.
- Sie werden in Sprachen, die Wörter mit Leerzeichen trennen (wie Englisch), in Leerzeichen umgewandelt oder in Sprachen, die Wörter nicht mit Leerzeichen trennen (wie Chinesisch), komplett entfernt.
- Wenn Leerzeichen zusammengefasst werden sollen:
- Leerzeichen oder Tabulatoren vor oder nach Segmentumbrüchen werden entfernt.
- Sequenzen von Leerzeichen werden in ein einziges Leerzeichen "zusammengefasst".
- Wenn Leerzeichen beibehalten werden, werden Sequenzen von Leerzeichen als nicht-umbruchend behandelt, außer dass sie am Ende jeder Sequenz weich umgebrochen werden — d.h. die nächste Zeile beginnt immer mit dem nächsten Nicht-Leerzeichen-Zeichen. Im Fall des
break-spaces
-Werts könnte jedoch ein weicher Umbruch nach jedem Leerzeichen auftreten, sodass die nächste Zeile mit einem oder mehreren Leerzeichen beginnen kann.
Formale Definition
Anfangswert | collapse |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
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 #ccc;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Text Module Level 4 # white-space-collapsing |
Browser-Kompatibilität
Siehe auch
- Abkürzung für
white-space-collapse
undtext-wrap-mode
: Diewhite-space
-Eigenschaft. - CSS-Textmodul