Texteigenschaften

Mit den folgenden CSS Eigenschaften kann man weitere Formatierungen des Textes vornehmen. Viele der hier aufgeführten Eigenschaften sind auf Block- Elemente anwendbar wie: adress, bockquote, dl, div, fieldset, form, h1- bis h6, hr, ol, ul, p, pre, table

text-align

Text ausrichten

Hiermit wird die horizontale Ausrichtung innerhalb eines Elements definiert.

text-align
Eigenschaft Wert Bedeutung
Standardwert left
Vererbbar ja
Anwendbar Alle Block-Elemente
text-align left links
right rechts
center mittig
justify Blocksatz

vertical-align

Text ausrichten

Hiermit wird die vertikale Ausrichtung innerhalb eines inline Elements festgelegt, beispielsweise wie sich kleiner Text innerhalb einer Zeile zu größerem Text verhält oder Text neben einem Bild. Man kann jedoch keine Ausrichting an Blockelementen damit festlegen.

Auch für die Ausrichtung in Tabellenzellen ist diese Eigenschaft wichtig. In Tabellenzellen kann man nur die 3 Wert top, middle, bottom verwenden.

vertical-align bei Selfhtml

so sieht's aus

vertical-align
Eigenschaft Wert Bedeutung  
Standardwert baseline
Vererbbar nein
Anwendbar inline- Elemente a, acronym, br, em img, input, small, span, strike, strong, textarea zusätzlich td, th
vertical-align top oberer Rand Tabellenzelle
bottom unterer Rand Tabellenzelle
text-top Ausrichtung am oberen Rand des Textes no
text-bottom Ausrichtung am unteren Rand des Textes no
baseline Element auf der Grundlinie  
middle mittlere Ausrichtung Tabellenzelle
sub tiefgestellt  
super hochgestellt  
Prozentangabe eine positive oder negative Angabe verschiebt das Element über oder unter die Grundlinie  

text-transform

Groß und Kleinschreibung

Man kann für einen bestimmten Textbereich bestimmen, ob er groß oder kleingeschrieben werden sollen. Außerdem kann man auch nur die Wortanfänge in Großschreibung darstellen. Im Zusammenhang mit font-variant: small-caps, kann man auch eine Schriftart mit Kapitälchen erzeugen.

text-transform Selfhtml

so sieht's aus

text-transform
Eigenschaft Wert Bedeutung
Standardwert left
Vererbbar ja
Anwendbar Alle Elemente
text-transform uppercase Großschreibung
lowercase Kleinschreibung
capitalize erster Buchstabe eines jeden Wortes groß
none normale Schreibweise

text-decoration

Text hervorheben mit Linien

Mit text-decoration kann man Textpassagen besonders hervorheben. Es lassen sich auch mehrere Werte angeben.

text-decoration Selfhtml

so sieht's aus

text-decoration
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar nein
Anwendbar Alle Elemente
text-decoration underline Linie unter dem Element
overline Linie über dem Element
line-through durchgestrichen
blink blinken
none normale Schreibweise

text-shadow

Text mit Schatteneffekt

Western Civilisation Shadow Tool

Ab CSS3 kann man Texte mit einem Schatteneffekt versehen. Achtung! Im Gegensatz zu Box-Shadow gibt es hier nur 4 Werte, um den Schatten zu definieren.

Die Werte sind:
x-Versatz, y-Versatz, Weichheit, Farbe
so sieht's aus

Durch mehrere Schatten lassen sich interessante Effekt erzielen:
so sieht`s aus siehe auch Pixeltuner

text-shadow: h-shadow v-shadow blur color

text-shadow: 2px 2px 3px #333

text-shadow
text-shadow h-shadow horizontaler Abstand
v-shadow vertikaler Abstand
blur Weichzeichnung
color Farbe

Textabstände

line-height

Die Zeilenhöhe ist der Abstand zwischen den Unterkanten zweier übereinanderliegender Zeilen. Wird die Höhe größer als 120% gesetzt führt das zu einem sogenannten zusätzlichen Durchschuss. Das ist ein typografischer Ausdruck, der sich auf den Zwischenraum zwischen den beiden Zeilen bezieht.

Je größer die Zeilenbreite, desto größer sollte die Zeilenhöhe werden, das fördert die Lesbarkeit.

Fette Schriften brauchen eine größere Zeilenhöhe z.B. 130% bis 140%.
so sieht's aus

word-spacing

Der ideale Wortzwischenraum ist laut Typografieregel der Abstand den ein Großbuchstabe in einer Serifenschrift einnehmen würde. Der typografische Ausdruck für den Wortabstand ist Ausschuss.
so sieht's aus

letter-spacing

Den Abstand zwischen den einzelnen Zeichen nennt man auch Laufweite, Buchstabenabstand oder Buchstabenweite. Die Abstände zwischen Buchstaben vergrößern nennt man in der Typgrafie sperren und verkleinern nennt man stauchen.
so sieht's aus

text-indent

In vielen Texten wird die erste Zeile eines Absatzes eingerückt. Das lässt sich mit der CSS Eigenschaft text-indent berwerkstelligen.
so sieht's aus

Textabstände
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar ja nur bei line-height vererbar auf Unterelemente
Anwendbar

die hier aufgeführten Eigenschaften sind anwendbar auf alle Elemente außer

text-indent ist nur anwendbar auf Blockelemente

line-height normal die in der Schrift definierte Zeilenhöhe von ca 120%
  Zahlenangaben Zahlen mit Maßeinheit oder Prozent
word-spacing normal Standardwert
  Zahlenangaben Standardmäßig wird Pixel genommen. Prozentangeben sind nicht erlaubt
letter-spacing normal Standardwert
  Zahlenangaben Standardmäßig wird Pixel genommen. Prozentangeben sind nicht erlaubt
text-indent Zahlenangaben Zahlen oder Prozentangaben Standardmäßig wird Pixel genommen.

Zeilenumbruch

Um einen Text vor Zeilenumbruch zu schützen kann man die CSS Eigenschaft white-space einsetzen. Es löst den HTML Tag <nobr> ab.

Selfhtml white-space

so sieht's aus

Silbentrennung kann man nicht mit CSS aber mit HTML erreichen.
Mehr dazu im Thema Zeilenumbruch.

white-space
Eigenschaft Wert Bedeutung
Standardwert normal
Vererbbar ja
Anwendbar Alle Block- Elemente
white-space normal automatischer Zeilenumbruch
pre Umbruch wie beim Html Element pre
pre-wrap wie beim Html-Element pre mit der Ausnahme, dass bei Platzmangel doch umgebrochen wird
pre-line wie bei pre aber mehrere Leerzeichen werden zusammengefasst
nowrap Zeilenumbruch wird unterbunden

Mehrspaltensatz column-count

siehe auch w3schools

Mit der neuen CSS Eigenschaft colum-count, kann man echten mehrspaltigen Text erzeugen, der automatisch in die nächste Spalte fließt. Achtung Browser Präfixe für Firefox und Chrome.

article {column-count: 2; column-gap: 1em;}

so sieht`s aus

column-count
Eigenschaft Wert Bedeutung
Standardwert auto
column-count Zahl Anzahl der Spalten
auto Hier wird die Anzahl der Spalten durch andere Eigenschaften ermittelt z.B. column-width

Alternativ kann man auch column-width angeben. Daraus ergibt sich die Anzahl der Spalten.

column-width
Eigenschaft Wert Bedeutung
Standardwert auto
column-width length Breite der Spalten z.B. 200px
auto Hier wird die Anzahl der Spalten durch andere Eigenschaften ermittelt z.B. column-width

Mittels column-gap gibt man an, wie groß die Lücke zwischen den Spalten sein soll.

column-gap
Eigenschaft Wert Bedeutung
Standardwert auto
column-gap number Breite der Lücke z.B. 20px
auto Hier wird die Anzahl der Spalten durch andere Eigenschaften ermittelt z.B. column-width

Mittels column-rule kann man eine Linie zwischen den Spalten definieren. Dieser Linie kann man 3 verschiedene Eigenschaften zuweisen: column-rule-width, column-rule-style, column-rule-color, Die Werte für column-rule-style entsprechen den Werten für border-style

Mit der Kurzschreibweise column-rule: Breite, Style Color gibt man alle 3 Eigenschaften auf einmal zuweisen.

column-rule
Eigenschaft Wert Bedeutung
Standardwert auto
column-rule width Breite der Linie
style Stil der Linie entspricht border-style
color Farbe

User-select

Die user-select Eigenschaft gibt an, ob der Text eines Elements ausgewählt werden kann.

user-select
Eigenschaft Wert Bedeutung
Standardwert auto
user-select auto Der Text kann ausgewählt werden, wenn der Browser es erlaubt
none Text kann nicht ausgewählt werden
text Der Text kann vom User ausgewählt werden
all Der gesamte Text wird mit einem Klick ausgewählt anstatt einem Doppelklick.