`white-space` CSS property

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die white-space CSS Shorthand-Eigenschaft legt fest, wie Leerzeichen innerhalb eines Elements behandelt werden.

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 legt zwei Dinge fest:

Ob und wie Leerzeichen zusammengefasst werden.
Ob und wie Zeilen umgebrochen werden.

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

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Shorthand-Eigenschaft für die folgenden CSS-Eigenschaften:

Hinweis: Die Spezifikation definiert eine dritte Zusammengesetzte Eigenschaft: white-space-trim, die noch in keinem Browser implementiert ist.

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: nowrap;
white-space: wrap;
white-space: break-spaces;
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;

Die Werte der white-space-Eigenschaft können als ein oder zwei Schlüsselwörter angegeben werden, die die Werte für die Eigenschaften white-space-collapse und text-wrap-mode darstellen, oder die folgenden speziellen Schlüsselwörter:

normal: Folgen von Leerzeichen werden zusammengefasst. Zeilenumbruchzeichen im Quelltext werden wie andere Leerzeichen behandelt. Zeilen werden nach Bedarf umgebrochen, um Linienboxen zu füllen. Entspricht collapse wrap.
pre: Folgen von Leerzeichen werden beibehalten. Zeilen werden nur an Zeilenumbruchzeichen im Quelltext und an <br>-Elementen umgebrochen. Entspricht preserve nowrap.
pre-wrap: Folgen von Leerzeichen werden beibehalten. Zeilen werden an Zeilenumbruchzeichen, an <br>, und nach Bedarf, um Linienboxen zu füllen, umgebrochen. Entspricht preserve wrap.
pre-line: Folgen von Leerzeichen werden zusammengefasst. Zeilen werden an Zeilenumbruchzeichen, an <br>, und nach Bedarf, um Linienboxen zu füllen, umgebrochen. Entspricht preserve-breaks wrap.

Hinweis: Die white-space-Eigenschaft als Shorthand ist eine relativ neue Funktion (siehe Browser-Kompatibilität). Ursprünglich hatte sie sechs Schlüsselwortwerte; nun wird der Wert nowrap stattdessen als ein Wert für text-wrap-mode interpretiert, während der Wert break-spaces als ein Wert für white-space-collapse interpretiert wird. Die oben genannten vier Schlüsselwörter sind noch spezifisch für white-space, aber sie haben Langform-Äquivalente. Die Änderung, white-space zu einer Shorthand-Eigenschaft zu machen, erweitert die akzeptablen Werte auf noch mehr Schlüsselwörter und Kombinationen, wie wrap und collapse.

Die folgende Tabelle fasst das Verhalten dieser vier white-space-Schlüsselwortwerte zusammen:

	Neue Zeilen	Leerzeichen und Tabs	Textumbruch	Ende-Leerzeichen	Ende-andere Leerraumtrenner
`normal`	Zusammenfassen	Zusammenfassen	Umbruch	Entfernen	Hängen
`pre`	Beibehalten	Beibehalten	Kein Umbruch	Beibehalten	Kein Umbruch
`pre-wrap`	Beibehalten	Beibehalten	Umbruch	Hängen	Hängen
`pre-line`	Beibehalten	Zusammenfassen	Umbruch	Entfernen	Hängen

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

Hinweis: Es wird zwischen Spaces und anderen Leerraumtrennzeichen unterschieden. Diese werden wie folgt definiert:

Spaces: Leerzeichen (U+0020), Tabs (U+0009) und Segmentwechsel (wie Zeilenumbrüche).
Andere Leerraumtrennzeichen: Alle anderen in Unicode definierten Leerraumtrennzeichen, außer denen, die bereits als Leerzeichen definiert sind.

Wo Leerzeichen als hängend bezeichnet werden, kann dies die Größe der Box beeinflussen, wenn sie für die intrinsische Größenbestimmung gemessen wird.

Formale Definition

Anfangswert	`normal`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

white-space = 
  normal                                              |
  pre                                                 |
  pre-wrap                                            |
  pre-line                                            |
  <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>  

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap  

<white-space-trim> = 
  none                                              |
  discard-before || discard-after || discard-inner

Beispiele

Einfaches Beispiel

css

code {
  white-space: pre;
}

Zeilenumbrüche innerhalb von <pre>-Elementen

css

pre {
  white-space: pre-wrap;
}

In Aktion

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: gainsboro;
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

Zeilenumbruch in Tabellen steuern

HTML

html

<table>
  <tbody>
    <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>
  </tbody>
</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 aufweist.

HTML

Der Text im <text>-Element muss in mehrere Zeilen aufgeteilt werden, damit die neuen Zeilen erkannt werden. Nach der ersten Zeile müssen die restlichen Leerzeichen 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>