white-space

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die white-space CSS Eigenschaft legt fest, wie Weißraum innerhalb eines Elements behandelt wird.

Probieren Sie es aus

white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: wrap;
white-space: collapse;
white-space: preserve nowrap;
<section class="default-example" id="default-example">
  <div id="example-element">
    <p>
      But ere she from the church-door stepped She smiled and told us why: 'It
      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and
      smiled, and passed it off Ere from the door she stept—
    </p>
  </div>
</section>
#example-element {
  width: 16rem;
}

#example-element p {
  border: 1px solid #c5c5c5;
  padding: 0.75rem;
  text-align: left;
}

Die Eigenschaft spezifiziert zwei Dinge:

  • Ob und wie Weißraum reduziert wird.
  • Ob und wie Zeilen umbrechen.

Hinweis: Um Wörter innerhalb selbst zu trennen, verwenden Sie overflow-wrap, word-break oder hyphens.

Syntax

css
/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* white-space-collapse and text-wrap-mode shorthand values */
white-space: wrap;
white-space: collapse;
white-space: preserve nowrap;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

Werte

Die white-space Eigenschaftswerte können als einzelnes Schlüsselwort aus der folgenden Liste oder als zwei Werte spezifiziert werden, um die Kurzform für die Eigenschaften white-space-collapse und text-wrap-mode darzustellen.

normal

Folgen von Weißraum werden reduziert. Zeilenumbrüche im Quelltext werden wie anderer Weißraum behandelt. Zeilen werden nach Bedarf gebrochen, um Zeilenboxen zu füllen.

pre

Folgen von Weißraum bleiben erhalten. Zeilen werden nur an Zeilenumbrüchen im Quelltext und an <br> Elementen gebrochen.

pre-wrap

Folgen von Weißraum bleiben erhalten. Zeilen werden an Zeilenumbrüchen, an <br> und nach Bedarf gebrochen, um Zeilenboxen zu füllen.

pre-line

Folgen von Weißraum werden reduziert. Zeilen werden an Zeilenumbrüchen, an <br> und nach Bedarf gebrochen, um Zeilenboxen zu füllen.

Die folgende Tabelle fasst das Verhalten der verschiedenen white-space Schlüsselwortwerte zusammen:

Neue Zeilen Leerzeichen und Tabs Textumbruch Leerzeichen am Zeilenende Andere Leerzeichentrennzeichen am Zeilenende
normal Reduziert Reduziert Umbruch Entfernen Hängen
pre Beibehalten Beibehalten Kein Umbruch Beibehalten Kein Umbruch
pre-wrap Beibehalten Beibehalten Umbruch Hängen Hängen
pre-line Beibehalten Reduziert Umbruch Entfernen Hängen

Ein Tabulator entspricht standardmäßig 8 Leerzeichen und kann mit der tab-size Eigenschaft konfiguriert werden. Im Fall von normal, nowrap und pre-line Werten wird jeder Tab in ein Leerzeichen (U+0020) Zeichen umgewandelt.

Hinweis: Es wird zwischen Leerzeichen und anderen Leerzeichentrennzeichen unterschieden. Diese sind wie folgt definiert:

Leerzeichen

Leerzeichen (U+0020), Tabs (U+0009) und Segmentumbrüche (wie Zeilenumbrüche).

andere Leerzeichentrennzeichen

Alle anderen in Unicode definierten Leerzeichentrennzeichen, die nicht bereits als Leerzeichen definiert sind.

Wo Weißraum gesagt wird, zu hängen, kann er die Größe der Box beeinflussen, wenn sie für die intrinsische Größenbestimmung gemessen wird.

Reduzierung von Weißraum

Formale Definition

Anfangswertnormal
Anwendbar aufalle Elemente
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

white-space = 
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line

Beispiele

Einfaches Beispiel

css
code {
  white-space: pre;
}

Zeilenumbrüche innerhalb von <pre>-Elementen

css
pre {
  white-space: pre-wrap;
}

In Aktion

Steuerung des Zeilenumbruchs in Tabellen

HTML

html
<table>
  <tr>
    <td></td>
    <td>Very long content that splits</td>
    <td class="nw">Very long content that don't split</td>
  </tr>
  <tr>
    <td class="nw">white-space:</td>
    <td>normal</td>
    <td>nowrap</td>
  </tr>
</table>

CSS

css
table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

Ergebnis

Mehrere Zeilen im SVG-Text-Element

Die white-space CSS-Eigenschaft kann verwendet werden, um mehrere Zeilen in einem <text> Element zu erstellen, das standardmäßig keinen Umbruch enthält.

HTML

Der Text innerhalb des <text> Elements muss in mehrere Zeilen aufgeteilt werden, damit die neuen Zeilen erkannt werden. Nach der ersten Zeile muss bei den restlichen Zeilen der Weißraum entfernt werden.

html
<svg viewBox="0 0 320 150">
  <text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

css
text {
  white-space: break-spaces;
}

Ergebnis

Spezifikationen

Specification
CSS Text Module Level 4
# white-space-property
Scalable Vector Graphics (SVG) 2
# TextWhiteSpace

Browser-Kompatibilität

Siehe auch