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.
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
/* 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
Die Seite zur white-space-collapse
Eigenschaft erklärt den Browser-Algorithmus zur Reduzierung von Weißraum.
Formale Definition
Anfangswert | normal |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
Einfaches Beispiel
code {
white-space: pre;
}
Zeilenumbrüche innerhalb von <pre>-Elementen
pre {
white-space: pre-wrap;
}
In Aktion
Steuerung des Zeilenumbruchs in Tabellen
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
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.
<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
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
- Eigenschaften, die definieren, wie Wörter innerhalb selbst gebrochen werden:
overflow-wrap
,word-break
,hyphens
tab-size