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.

Die white-space-collapse CSS-Eigenschaft steuert, wie Leerzeichen innerhalb eines Elements reduziert werden.

Hinweis: Die Eigenschaften white-space-collapse und text-wrap können gemeinsam mit der Abkürzungseigenschaft white-space deklariert werden.

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;

Die white-space-collapse-Eigenschaft wird als ein einzelnes Schlüsselwort aus der unten stehenden Werteliste angegeben.

Werte

collapse

Leerzeichensequenzen werden reduziert.

preserve

Leerzeichensequenzen und Segmentumbruch-Zeichen werden beibehalten.

preserve-breaks

Leerzeichensequenzen werden reduziert, während Segmentumbruch-Zeichen beibehalten werden.

preserve-spaces

Leerzeichensequenzen werden beibehalten, während Tabs und Segmentumbruch-Zeichen in Leerzeichen umgewandelt werden.

break-spaces

Das Verhalten ist identisch zu preserve, außer dass:

Jede Folge von beibehaltenen Leerzeichen immer Platz beansprucht, einschließlich am Ende der Zeile.
Eine Zeilenumbruchmöglichkeit nach jedem beibehaltenen Leerzeichen besteht, auch zwischen Leerzeichen.
Beibehaltene Leerzeichen Platz beanspruchen und nicht hängen, was somit die intrinsischen Größen der Box beeinflusst (min-content-Größe und max-content-Größe).

Hinweis: Segmentumbruch-Zeichen sind Zeichen wie Zeilenumbrüche, die bewirken, dass der Text auf neue Zeilen wechselt.

Reduzierung von Leerzeichen

Benutzeragenten handhaben die Reduzierung von Leerzeichen wie folgt:

Tabs werden in der Regel in Leerzeichen umgewandelt.
Wenn Segmentumbrüche reduziert werden sollen:
- Folgen von Segmentumbrüchen werden auf einen einzigen Segmentumbruch reduziert.
- Sie werden in Sprachen, die Wörter mit Leerzeichen trennen (wie Englisch), in Leerzeichen umgewandelt oder bei Sprachen, die keine Leerzeichen verwenden (wie Chinesisch), vollständig entfernt.
Wenn Leerzeichen reduziert werden sollen:
- Leerzeichen oder Tabs vor oder nach Segmentumbrüchen werden entfernt.
- Folgen von Leerzeichen werden in ein einzelnes Leerzeichen umgewandelt oder "reduziert".
Wenn Leerzeichen beibehalten werden, werden Folgen von Leerzeichen als nicht-umbruchend behandelt, außer dass sie am Ende jeder Sequenz weich umbrochen werden — d.h. die nächste Zeile beginnt immer mit dem nächsten Nicht-Leerzeichen-Zeichen. Im Fall des break-spaces-Werts kann ein weicher Umbruch jedoch potenziell nach jedem Leerzeichen auftreten, sodass die nächste Zeile mit einem oder mehreren Leerzeichen beginnen kann.

Formale Definition

Initialer Wert	`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

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>

CSS

css

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

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

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

h2 {
  font-size: 1.6rem;
  font-family: monospace;
}

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Abkürzung für white-space-collapse und text-wrap: Die white-space-Eigenschaft.
CSS Textmodul