CSS-Eigenschaft: white-space, Kategorien: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3)
Verhalten von Leerzeichen
Steuert, wie Leerzeichen im Quelltext im Browser dargestellt werden sollen.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Verhalten von Leerzeichen |
| normal |
|
Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3):
- hanging-punctuation
- hyphens
- letter-spacing
- line-break
- line-height
- line-stacking
- line-stacking-ruby
- line-stacking-shift
- line-stacking-strategy
- marquee-direction
- marquee-play-count
- marquee-speed
- marquee-style
- overflow-style
- overflow-wrap
- tab-size
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-height
- text-indent
- text-justify
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- Aktuelle Seite: white-space
- word-break
- word-spacing
- word-wrap
Folgendes ist beim Einsatz von white-space zu beachten:
- Relevant für diese CSS-Eigenschaft ist das Verständnis des normalen Verhaltens von Leerzeichen im HTML. Daraus ergeben sich die einzelnen Anwendungsfälle für white-space.
- Standardverhalten ist, dass zwei Worte, die durch ein Leerzeichen getrennt sind, auch getrennt dargestellt werden und bei Bedarf das zweite Wort in die nächste Zeile um bricht.
(Gleiches Verhalten gilt auch für Trennstriche in Worten, daran brechen Worte ebenfalls um).
- Dieses Verhalten kann ungewünscht sein, wenn zwei zusammengehörige Worte bzw. Wortteile am Zeilenende nicht umgebrochen werden sollen, wie zum Bespiel "1. FC Köln" oder "Die Grünen". In HTML gibt es die Möglichkeit des sogenannten geschützten Leerzeichen: , das sich nicht wie ein Leerzeichen verhält, sondern wie ein regulärer Buchstabe und das Umbrechen an dieser Stelle verhindert.
- Alternativ kann der CSS-Eigenschaft white-space der Wert nowrap zuweisen, was den gleichen Effekt wie ein geschütztes Leerzeichen hat, mit dem Vorzug, kein Extra-Zeichen im Quellcode zu haben (also, z.B. <span style="white-space:nowrap">CSS 2.1</span>. Hier würde ein Zeilenumbruch zwischen CSS und 2.1 verhindert werden).
- Im Beispiel unten sieht man allerdings, wie lange Wortfolgen per white-space: nowrap; aus ihrem Fluss genommen werden und brachial über die Grenze des umgebenden HTML-Elements hinauslaufen. Dieser Effekt ist sicher ungewollt und ein Grund dafür, diese Eigenschaft mit Vorsicht einzusetzen.
- Ein Beispiel der Verwendung von white-space: nowrap; ist in Tabellenkopfzellen (TH), wo Zeilenumbrüche vermieden werden sollen, falls es durch den Tabelleninhalt zu Verschiebungen der Spaltenbreite kommt.
- Mehrere Leerzeichen in Folge werden in der Darstellung wie beim HTML-Standardverhalten zu einem Leerzeichen reduziert.
- Das HTML-Standardverhalten ist, dass unabhängig von der Anzahl von Leerzeichen und Zeilenumbrüchen im Quelltext zwischen zwei Worten oder anderen HTML-Elementen, diese in der
Frontenddarstellung stets auf ein Leerzeichen reduziert werden. Dies ist sinnvoll, da dadurch automatisch der Lesefluss durch den Lückenschluss der einzelnen Elemente gewährleistet ist. Ohne dieses Verhalten wären Programmierer dazu gezwungen, "schöne" und 100%
ordentliche Quelltexte zu schreiben, in denen jede unsaubere Stelle bedingungslos im Browser angezeigt würde.
- Möchte man dieses Standardverhalten außer Kraft setzen, setzt man white-space: pre; ein. Vergleichbar zum HTML-Element <pre> werden hier alle Leerzeichen und Zeilenumbrüche so wie im Quelltext vorhanden.
- In der Praxis sieht man diese Zuweisung, wenn durch Einrückungen Daten strukturiert werden sollen. Gerade am Anfang des Internets hat man diese Eigenschaft als schnelle Variante gewählt, da vorhandene Texte nicht extra ins HTML übertragen werden mussten, sondern einfach in <pre>-Blöcke kopiert wurden. Allerdings ist dies aus Sicht eines semantischen Webs fatal. Optisch wird eine Struktur von Daten vorgegaukelt, die nicht vorhanden ist. Die Beispiele unten verdeutlichen dies.
- white-space: pre-wrap; verhält sich ähnlich wie white-space: pre; mit dem Unterschied, dass Zeilenumbrüche in der Darstellung gemacht werden, wenn die Dimension der Box erreicht ist.
- white-space: pre-line; ist im Grunde das Gegenteil von white-space: pre-wrap;. Hier werden Zeilenumbrüche wie im Quelltext eingegeben dargestellt, mehrere Leerzeichen werden zu einem Zeichen reduziert.
- white-space: pre-wrap; und white-space: pre-line; sind zwei Eigenschaften, die man in der Praxis selten sieht. Möglicherweise, weil sie erst mit der Version CSS 2.1 eingeführt worden, möglicherweise aber auch, weil das Verhalten erst mal recht ungewöhnlich erscheint. Die Browserunterstützung erschließt sich nicht auf den ersten Blick.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu white-space:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/text.html#propdef-white-space
Beispiele
HTML:
<div>
<p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>
CSS:
div {
border: 1px solid black;
}
p {
margin: 15px;
}
Beispiel Nr. 1 So sieht's aus:
Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<div>
<p class="doNowrap">Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>
CSS:
p.doNowrap {
white-space: nowrap;
}
/* Hier wird der Nachteil von nowrap sehr deutlich ;-) */
Beispiel Nr. 2 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.
HTML:
<div>
<p class="doPre">Es hat lange
gedauert,
bis
ich
begriffen habe,
was es bedeutet, was es bedeutet, was es bedeutet,
ein blinder Text
zu sein.</p>
</div>
CSS:
p.doPre {
white-space: pre;
}
Beispiel Nr. 3 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, was es bedeutet, was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<p class="doPre doMono">Es hat lange
gedauert,
bis
ich
begriffen habe,
was es bedeutet,
ein blinder Text
zu sein.</p>
</div>
CSS:
p.doMono {
font-family: courier;
}
/* Bei einem Mono-Fonttype wird deutlich, dass Buchstabe genau unter Buchstabe steht */
Beispiel Nr. 4 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<p class="doPreLine">Es hat lange
gedauert,
bis
ich
begriffen habe,
was es bedeutet,
ein blinder Text
zu sein.</p>
</div>
CSS:
p.doPreLine {
white-space: pre-line;
}
Beispiel Nr. 5 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.
HTML:
<div>
<p class="doPreWrap">Es hat lange
gedauert,
bis
ich
begriffen habe,
was es bedeutet, was es bedeutet, was es bedeutet, was es bedeutet,
ein blinder Text
zu sein.</p>
</div>
CSS:
p.doPreWrap {
white-space: pre-wrap;
}
Beispiel Nr. 6 So sieht's aus:
Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, was es bedeutet, was es bedeutet, was es bedeutet, ein blinder Text zu sein.
HTML:
<div class="doPre">
MO DI MI DO FR SA SO
Termin X 15:00 frei frei
Termin Y 22:00
</div>
CSS:
div.doPre {
white-space: pre;
font-family: courier;
}
/* Die Daten in diesem DIV scheinen in der Darstellung eine Struktur einer Tabelle zu haben. */
Beispiel Nr. 7 So sieht's aus:
HTML:
<div class="doNotPre">
MO DI MI DO FR SA SO
Termin X 15:00 frei frei
Termin Y 22:00
</div>
CSS:
/* Gleiches HTML wie im Beispiel Nr. 7, allerdings ohne "white-space: pre". Hier geht die visuelle Struktur verloren und es wird deutlich, dass die Daten keine Struktur haben. */
Beispiel Nr. 8 So sieht's aus:
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!