Morgen.

Tag acht des CSS-Adventskalenders, wie die Zeit vergeht. Heute im Angebot: white-space und wie und warum man es benutzt. Wie immer gibts ein aussagekräftiges Beispiel, wenn ihr allerdings noch ein besseres bzw. überzeugenderes parat habt, dann immer her damit! Und ja ich weiß, ich bin viel zu spät dran damit aber besser spät als.. na ihr wisst schon.

Browserunterstützung

Browser
ab Version	1.0	1.0	4.0	1.0	6.0

white-space hat im Laufe der Zeit einige neue mögliche Werte bekommen, uns geht es aber primär um den Wert nowrap, den jeder relevante Browser schon seit längerem unterstützt. nowrap ermöglicht es uns Zeilenumbrüche zu verhindern. D. h. egal was kommt, Text mit diesem Wert wird auf keinen Fall umgebrochen.

Beispiel

Am einfachsten kann man das durch ein Beispiel zeigen. Manchmal möchte man ein Element in eine Richtung floaten lassen und vergibt eine eher schmale Breite. Innerhalb des Elements steht meinetwegen eine Überschrift und ein Datum, da der Browser nicht weiß, dass es ein Datum ist, bricht er den Text aufgrund der Breite innerhalb des Datums um. Das sieht nicht schön aus, besser wäre es doch, wenn der Text nach der Überschrift umbrechen würde und das Datum zusammen bleibt.

HTML

1
2
3
4

<div class="widget">
	<h3>Überschrift <span class="datum">8. Dezember 2010</span></h3>
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

CSS

1
2
3
4
5
6

.widget {
	background-color:#eee;
	border:1px solid #aaa;
	padding:10px;
	width:180px;
}

Ergebnis

Wie ihr seht, bricht der Text erst nach der “8″ um, somit wird das Datum auseinander gerissen. Um das zu vermeiden, geben wir jetzt der Klasse “datum” white-space:nowrap.

CSS

1
2
3

.datum {
	white-space:nowrap;
}

Ergebnis

Und siehe da, das Datum bleibt als Ganzes erhalten und die Überschrift muss nun an anderer Stelle umbrechen. Mission accomplished.