Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: white-space
KurzbeschreibungWerteStandardwertKategorieHinweis
Verhalten von Leerzeichen
  • normal
  • pre
  • nowrap
  • pre-wrap
  • pre-line
  • inherit
normal
Allgemein:
Textdarstellung
CSS 2.1:
Text
CSS 3:
Text
 

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.
Browserunterstützung von white-space
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu white-space:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    volume


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:

MO DI MI DO FR SA SO Termin X 15:00 frei frei Termin Y 22:00
 

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:

MO DI MI DO FR SA SO Termin X 15:00 frei frei Termin Y 22:00
 

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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.107 sec.

Browser-Marktanteile