CSS text-transform: Groß- und Kleinschreibung (Beispiele)

Ein praktischer Guide zu CSS text-transform und wann man CSS statt JavaScript für echte Textänderungen nutzen sollte.

CSS text-transform: Groß- und Kleinschreibung (Mit Beispielen)

Viele Entwickler suchen nach „Groß- in Kleinschreibung mit CSS ändern“ und hoffen auf eine echte Änderung des Textes. CSS verändert jedoch nur die visuelle Darstellung, nicht den tatsächlichen Wert des Strings. Dieser Guide erklärt, warum das wichtig ist.

Inhaltsverzeichnis:

text-transform: lowercase

Der Text erscheint in Kleinschreibung, aber die Quelle bleibt unverändert.
.selector { text-transform: lowercase; }

text-transform: uppercase

Der Text wird in Großbuchstaben angezeigt, ohne den Original-String zu ändern.
.selector { text-transform: uppercase; }

text-transform: capitalize

Capitalize zeigt den ersten Buchstaben jedes Wortes groß an – wiederum nur visuell.
.selector { text-transform: capitalize; }

CSS vs. JavaScript

Nutzen Sie diese Tabelle, um zu entscheiden, welche Technologie für Ihren Bedarf am besten geeignet ist.
Fall CSS JavaScript
Nur visuelles Design Ja Optional
Echte Textänderung Nein Ja
Formularübermittlung Nein Ja

Echten Text konvertieren

Wenn Sie möchten, dass sich der Text tatsächlich ändert (für Copy-and-Paste oder ein Formular), nutzen Sie JavaScript oder einen Konverter.

FAQ

Wenn Sie Fragen zu CSS und Groß-/Kleinschreibung hatten, hier ist die wichtigste Antwort.

Ändert text-transform den Quelltext?

Nein. Es handelt sich um eine rein visuelle Transformation.

Wann sollte ich JavaScript statt CSS nutzen?

Nutzen Sie JS, wenn der tatsächliche Wert des Text-Strings geändert werden muss.

Gibt es eine schnelle Option ohne Code?

Ja. Nutzen Sie den Online-Konverter.

Möchten Sie den Quelltext ändern?

Nutzen Sie den Konverter für echte Formatänderungen, nicht nur für visuelle Stile.

Konverter öffnen