Groß- und Kleinbuchstaben in Texten transformieren

Normalerweise werden Texte auf Websites so dargestellt, wie sie geschrieben wurden. Manchmal ist es notwendig, die Groß- und Kleinschreibung zu ändern, ohne dass man die Texte neu schreiben muss. Beispielsweise kann es erwünscht sein, die Buchstaben in der Navigation komplett in Großbuchstaben darzustellen.

Texte nur in Groß- oder Kleinbuchstaben

Für solche Umwandlungen in der Darstellung verwendet man die Eigenschaft text-transform. Nachfolgend ist ein Beispielcode abgebildet, mit dem alle Buchstaben innerhalb des betreffenden Elements in Großbuchstaben dargestellt werden.

CSS-Code mit text-transform

Werte für text-transform

Für die Eigenschaft text-transform können die folgenden Werte verwendet werden.

  • none (Standardeinstellung, keine Transformation)
  • uppercase (Großbuchstaben)
  • lowercase (Kleinbuchstaben)
  • capitalize (1. Zeichen in Großbuchstaben)
  • initial (Setzt auf den Standardwert)
  • inherit (Vererbt vom Elternelement)

Nachfolgend sind einige CSS-Codes und die Abbildungen von der Darstellung im Browser.

Beispiel mit dem Wert lowercase

.selektor {
text-transform: lowercase;
}
<p class="selektor">Text in Kleinbuchstaben</p>
text-transform: lowercase

Beispiel mit dem Wert capitalize

.selektor {
text-transform: capitalize;
}
<p class="selektor">1. Buchstabe groß geschrieben</p>
text-transform: capitalize

Die Eigenschaft text-transform wird von allen gängigen Browsern zuverlässig unterstützt.