Bewegung in die Sache gekommen. Moderne Browser akzeptieren diverse gängige Schriftartenformate wie TrueType oder OpenType ohne Domain-Bindung und Ähnliches. Wer Wert auf individuelle Typografie mit nicht alltäglichen Schriftarten legt, kann die Schriftart einfach als Beipack zusammen mit den Webseiten ausliefern – vorausgesetzt, die Lizenzform der Schriftart erlaubt eine solche Verwendung.
Beispiel
    
    
    
    
    
    
    
    
    

In Grana Padano

    

    So einfach geht das auf
    openfontlibrary.org!
    

    
    
    Bild 14.6: font-face-Beispiel im Browser
Erläuterung
    Zunächst notieren Sie in einem zentralen Stylesheet – es kann sich um ein
style
-Element im Dokumentkopf oder um eine externe CSS-Datei handeln – eine
    td { white-space:nowrap; }
    
    
    
    

    Der Absatz, den Sie gerade lesen,
    wurde als predefiniert definiert.
    Zeilenumbrüche sollten dabei so interpretiert
    werden, wie sie im Editor eingegeben wurden.
    

    
    
    
    
    
    

Hier wird nichts umgebrochen,     auch wenns länger sein sollte.

Hier auch nicht, denn der Umbruch wird für     alle Tabellenzellen verhindert

    
    
    Bild 14.10: Umbruchkontrolle im Browser
Erläuterung
    Mit
white-space:
können Sie das Verhalten für den Zeilenumbruch festlegen. Zwei wichtige Angaben sind dabei möglich, nämlich
pre
und
nowrap
.
    Mit
pre
erreichen Sie den Effekt, den auch das
pre
-Element in HTML hat: Text wird so umbrochen wie eingegeben, und alle Leerraumzeichen werden wiedergegeben, auch mehrere in Folge – gut geeignet zur Darstellung von Quelltexten mit Einrückungen.
    Mit
nowrap
verhindern Sie den Zeilenumbruch. Diese Angabe wird häufig für Tabellenzellen verwendet, in denen Umbrüche je nach Inhalt sehr störend sein können, etwa bei Währungsbeträgen und nachfolgendem, durch Leerzeichen getrennten Währungszeichen.
    Mit CSS 2.1 werden noch die folgenden Werte eingeführt:
pre-wrap
ist eine Variante von
pre
, bei der automatisch ein Umbruch eingefügt wird, wenn die Breite der Box zur Anzeige der Zeile nicht ausreicht.
pre-line
verhält sich fast wie normales HTML. Mehrere Leerraumzeichen werden zu einem zusammengefasst. Jedoch werden im Text eingegebene Zeilenumbrüche als solche umgesetzt.
Weitere Hinweise
    Interessant ist die Angabe
pre-line
vor allem beim Wiedergeben von Texten aus mehrzeiligen Formular-Eingabefeldern, also etwa von Kommentaren in Blogs. Spezialbehandlungen wie die PHP-Funktion
nl2br()
, die Zeilenumbrüche in


-Elemente verwandelt, können damit entfallen.
Referenzinformationen
    CSS-Eigenschaften
white-space
:

14.4      Außenrand und Abstand
    Außenrand oder Abstand bedeutet: erzwungener Leerraum zwischen dem aktuellen Element und seinem Elternelement oder Nachbarelement. Für ein
p
-Element etwa, also einen Textabsatz, der direkt innerhalb eines
div
-Elements notiert ist, markieren Angaben zu linkem und rechtem Außenrand seinen Abstand zu den Elementgrenzen des elterlichen
div
-Elements. Wenn mehrere solcher
p
-Absätze aufeinanderfolgen, markieren Angaben zum Außenrand oben und unten den Abstand zwischen den Absätzen.
    Bild 14.11: Außenränder und Abstände, hier von zwei p-Elementen
    Sinnvoll anwendbar sind die hier beschriebenen CSS-Eigenschaften vor allem auf HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für
header
,
article
,
h[1-6]
,
p
oder
pre
. Auch bei der Positionierung von Formularelementen oder Elementen, die durch die CSS-Eigenschaft
float
vom nachfolgenden Inhalt umgeben werden, spielen Abstände häufig eine Rolle. Sogar auf
body
lassen sich diese Stylesheet-Angaben anwenden. In diesem Fall werden Abstände zum Anzeigefenster definiert.
    Mit negativen Werten, also Angaben wie beispielsweise
-50px
, können Sie für besondere gestalterische Zwecke erreichen, dass sich Elemente überlappen.
Beispiel