CSS: Text-Transform – Kleinbuchstaben & Großbuchstaben

Mit CSS text-transform kannst du Texte in Großbuchstaben darstellen. Du kannst auch nur Kleinbuchstaben schreiben. Es ist auch möglich das nur der erste Buchstabe eines Wortes in Großbuchstaben dargestellt wird.

Wie das geht zeige ich dir in diesem Beitrag.

CSS: Großbuchstaben

Mit text-transform: uppercase kannst du den kompletten Text in Großbuchstaben darstellen

.csstext{
text-transform:uppercase;
}

Ergebnis

Du erhältst einen Text aus nur Großbuchstaben.

CSS: Kleinbuchstaben

Mit text-transform: lowercase kannst du den kompletten Text in Großbuchstaben darstellen

.csstext{
text-transform:lowercase;
}

Ergebnis

Du erhältst einen Text aus nur Kleinbuchstaben

CSS: Erster Buchstabe als Großbuchstaben darstellen

Mit text-transform: capitalize wird der jeweilig erste Buchstabe eines Textes mit gross dargestellt.

.csstext{
text-transform:capitalize;
}

Ergebnis

Zusammenfassung von Text Transform in CSS

Die CSS-Eigenschaft text-transform steuert die Groß- und Kleinschreibung von Text.

Sie kann verwendet werden, um Text komplett in Großbuchstaben, komplett in Kleinbuchstaben oder mit Großbuchstaben am Wortanfang darzustellen. Des Weiteren kann sie die Lesbarkeit von Ruby verbessern.

• none: Der Text wird in seiner ursprünglichen Groß- und Kleinschreibung angezeigt.
• capitalize: Der erste Buchstabe jedes Wortes wird großgeschrieben, der Rest des Wortes bleibt kleinbuchstabig.
• uppercase: Alle Buchstaben werden großgeschrieben.
• lowercase: Alle Buchstaben werden kleingeschrieben.

Über mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite