CSS text-transform: Store bogstaver, små bogstaver og capitalize (Eksempler)

En praktisk vejledning til CSS text-transform og hvornår man skal bruge CSS i stedet for JavaScript til reelle tekstændringer.

CSS text-transform: Store bogstaver, små bogstaver og capitalize

Mange udviklere leder efter, hvordan man "skifter store til små bogstaver med CSS" i håb om en reel ændring af teksten. CSS ændrer dog kun det visuelle udseende, ikke strengens faktiske værdi. Denne vejledning forklarer, hvorfor det er vigtigt.

Indholdsfortegnelse:

text-transform: lowercase

Teksten vises som små bogstaver, men kilden forbliver uændret.
.selector { text-transform: lowercase; }

text-transform: uppercase

Teksten vises som store bogstaver uden at ændre den oprindelige streng.
.selector { text-transform: uppercase; }

text-transform: capitalize

Capitalize viser det første bogstav i hvert ord som stort – igen, kun visuelt.
.selector { text-transform: capitalize; }

CSS vs. JavaScript

Brug denne tabel til at beslutte, hvilken teknologi der passer bedst til dine behov.
Anvendelsesområde CSS JavaScript
Kun visuelt design Ja Valgfrit
Reel tekstændring Nej Ja
Formularindsendelse Nej Ja

Omform den faktiske tekst

Hvis du har brug for, at teksten faktisk ændres (til kopier-indsæt eller til en formular), så brug JavaScript eller en omformer.

FAQ

Hvis du undrede dig over CSS og format, er her det vigtigste svar.

Ændrer text-transform kildeteksten?

Nej. Det er kun en visuel transformation.

Hvornår skal man bruge JavaScript i stedet for CSS?

Brug JS, når du har brug for, at tekststrengens faktiske værdi skal ændres.

Findes der et hurtigt alternativ uden kode?

Ja. Brug online-omformeren.

Har du brug for at ændre kildeteksten?

Brug omformeren til en reel formatændring, ikke kun en visuel stil.

Åbn omformeren