Zurück: Schriftformatierung
Weiter: Listen

Textformatierung

text-indent

Mit der Eigenschaft text-indent bestimmen Sie den Texteinzug der ersten Zeile eines Absatzes.

<Länge>
Die erste Zeile wird um eine feste Längenangabe eingezogen.
<Prozent>
Die erste Zeile wird um eine entsprechende Prozentzahl der Breite des Textes (besser gesagt: des enthaltenden Blocks) eingezogen.
inherit

Der Initialwert ist 0.

Folgendes Beispiel erzeugt einen Texteinzug von 4em für alle Elemente p:

p { text-indent: 4em }
text-align

Mit der Eigenschaft text-align bestimmen Sie die Ausrichtung des (Text-)Inhaltes eines Elementes.

left, right oder center
Der Inhalt wird linksbündig, rechtsbündig oder zentriert ausgerichtet.
justify
Erzeugt Blocksatz.
  • Blocksatz füllt die gesamte Spaltenbreite mit Text aus, indem die Wortabstände verändert werden. Passt ein Wort nicht mehr in eine Zeile, wird es in die nächste Zeile übernommen. In diesem Fall wird der Wortabstand der Vorzeile erweitert. Dieser Textabschnitt soll das demonstrieren. Im traditionellen Schriftsatz, zum Beispiel im Buchdruck, wird meist Blocksatz verwendet, da durch das in sich geschlossene Satzbild Ruhe und Ausgeglichenheit vermittelt wird, was sich normalerweise positiv auf die Lesbarkeit auswirkt. Auf Webseiten werden Sie Blocksatz eher selten antreffen, das hat zwei Gründe:
    1. Es gibt keine sinnvolle Möglichkeit, Wörter zu trennen. Dadurch entstehen häufig übergroße Wortzwischenräume.
    2. Auf der unruhigen Leseoberfläche eines Monitor werden die unterschiedlichen Wortzwischenräume vom Auge bei langem Lesen als unruhig empfunden.
    Aus diesen Gründen sollten Sie beim Erstellen von Webseiten vom Blocksatz Abstand nehmen.
<Zeichenkette>
Definiert eine Zeichenkette, an der Text innerhalb von Tabellenzellen ausgerichtet wird. In folgendem Beispiel werden Textinhalte am Komma ausgerichtet, ideal zum Beispiel für die Aufzählung von Geldbeträgen in Rechnungen: 
td { text-align: "," }

Außerhalb von Tabellenzellen wird die Angabe ignoriert und die gewöhnliche Ausrichtung angenommen.

Im Moment gibt es allerdings keinen Browser, der Textausrichtung auf eine Zeichenkette unterstützt.

Der Initialwert ist vom User-Agent und der Schriftrichtung abhängig. In unseren Breiten ist das für gewöhnlich left.

text-decoration
none
underline
Der Inhalt des Elementes wird unterstrichen, entsprechend dem veralteten Element u.
overline
Der Inhalt des Elementes wird überstrichen.
line-through
Der Inhalt des Elementes wird durchgestrichen, entsprechend der veralteten Elemente strike und s.
  • Bedenken Sie bitte, dass Sie dem Text keine logische Bedeutung verleihen, wenn Sie ihn mit dieser CSS-Eigenschaft durchstreichen. Womöglich ist das XHTML-Element del in Verbindung mit ins besser geeignet.
blink
Der Inhalt des Elementes blinkt. Es ist Browsern nicht vorgeschrieben, diesen Wert zu implementieren. (Gott sei Dank!)
letter-spacing und word-spacing
normal
<Länge>
Mit den Eigenschaften letter-spacing und word-spacing bestimmen Sie einen Abstand, der zusätzlich zur Standardlaufweite zwischen Buchstaben bzw. zwischen einzelnen Wörtern addiert wird. Der Wert kann auch negativ sein, in diesem Fall würde der Abstand entsprechend verringert werden.
inherit
text-transform

Mit der Eigenschaft text-transform geben Sie unabhängig von der tatsächlichen Schreibweise im Dokument an, ob Text nur in Groß- oder Kleinbuchstaben oder aber in Kapitälchen dargestellt wird.

none
capitalize
Der erste Buchstabe jedes Wortes erscheint als Großbuchstabe.
uppercase
Alle Buchstaben werden als Großbuchstaben dargestellt.
lowercase
Alle Buchstaben werden als Kleinbuchstaben dargestellt.
inherit
white-space

Mit der Eigenschaft white-space bestimmen Sie die Darstellung von Leerraum (Leerzeichen, Zeilenumbrüche, Tabulatoren) innerhalb eines Elementes.

normal
pre
Die Darstellung des Textes entspricht der von präformatiertem Text, also dem XHTML-Element pre. Text wird genauso dargestellt, wie er im Editor angegeben wird.
nowrap
Zeilen werden nicht umbrochen, ansonsten wird Leeraum wie gewöhnlich behandelt.
inherit

Folgendes Dokument stellt die einzelnen Eigenschaften vor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Textformatierung</title>
<style type="text/css">
.eins {
   text-indent: 6em;
}
.zwei {
   text-align: justify;
   letter-spacing: 3px;
}
.drei {
   text-decoration: overline;
   text-transform: capitalize;
}
.vier {
   white-space: nowrap;
   word-spacing: .5em;
}
</style>
</head>

<body>

<p class="eins">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

<p class="zwei">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

<p class="drei">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

<p class="vier">Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.</p>

</body>
</html>

Beispieldokument ansehen

Zurück: Schriftformatierung
Weiter: Listen
Zum Seitenanfang