Türchen #8: white-space

von

Morgen.

Türchen #8 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 Firefox Safari Opera Chrome Internet Explorer
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

Überschrift 8. Dezember 2010

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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

Überschrift 8. Dezember 2010

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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

Die hier könnten dich auch interessieren…

1 Kommentar RSS

McFire

Vlt sollte man der Vollständigkeit erwähnen, daß white-space erst Sinn macht, wenn man mehr Text als im Beispiel zusammenhalten will. Und daß es für ein Datum oder Geldangaben natürlich mit eingefügten   weniger Code braucht.

Kommentieren