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 white-space-collapse und text-wrap Eigenschaften können zusammen mit der Kurzschreibweise 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 Eigenschaft white-space-collapse wird als ein einzelnes Schlüsselwort aus der unten stehenden Liste von Werten angegeben.

Werte

collapse

Leerzeichen-Sequenzen werden reduziert.

preserve

Leerzeichen-Sequenzen und Segment-Trennzeichen werden beibehalten.

preserve-breaks

Leerzeichen-Sequenzen werden reduziert, während Segment-Trennzeichen beibehalten werden.

preserve-spaces

Leerzeichen-Sequenzen werden beibehalten, während Tabs und Segment-Trennzeichen in Leerzeichen umgewandelt werden.

break-spaces

Das Verhalten ist identisch zu preserve, mit der Ausnahme, dass:

Jede Sequenz von erhaltenen Leerzeichen nimmt immer Platz ein, auch am Ende der Zeile.
Eine Zeilenumbruchmöglichkeit besteht nach jedem erhaltenen Leerzeichen, auch zwischen Leerzeichen.
Erhaltene Leerzeichen nehmen Platz ein und hängen nicht, was somit die intrinsischen Größen des Kastens beeinflusst (min-content Größe und max-content Größe).

Hinweis: Segment-Trennzeichen sind Zeichen wie Zeilenumbrüche, die den Text auf neue Zeilen brechen lassen.

Reduzierung von Leerzeichen

Browser-Agenten handhaben die Reduzierung von Leerzeichen wie folgt:

Tabs werden im Allgemeinen in Leerzeichen umgewandelt.
Wenn Segment-Trennzeichen reduziert werden sollen:
- Sequenzen von Segment-Trennzeichen werden auf ein einzelnes Segment-Trennzeichen reduziert.
- Sie werden in Sprachen, die Wörter mit Leerzeichen trennen (wie Englisch), in Leerzeichen umgewandelt oder bei Sprachen, die Wörter nicht mit Leerzeichen trennen (wie Chinesisch), vollständig entfernt.
Wenn Leerzeichen reduziert werden sollen:
- Leerzeichen oder Tabs vor oder nach Segment-Trennzeichen werden entfernt.
- Sequenzen von Leerzeichen werden in ein einzelnes Leerzeichen umgewandelt oder "reduziert".
Wenn Leerzeichen beibehalten werden, werden Sequenzen von Leerzeichen als Untrennbar 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 Wertes könnte jedoch ein weicher Umbruch nach jedem Leerzeichen potenziell 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>

<h2 class="preserve-spaces">In this case only
  the   spaces       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;
}

.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

BCD tables only load in the browser

Siehe auch

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