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.
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.
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>
Beispiel mit dem Wert capitalize
.selektor {
text-transform: capitalize;
}
<p class="selektor">1. Buchstabe groß geschrieben</p>
Die Eigenschaft text-transform wird von allen gängigen Browsern zuverlässig unterstützt.