Den text-transformeiendom i CSS styrer teksten saken og kapitalisering.
.lowercase ( text-transform: lowercase; )Teksttransformasjonsverdier
lowercasegjør alle bokstavene i den valgte teksten til små bokstaver.uppercasegjør alle bokstavene i den valgte teksten store.capitalizestore bokstaver i hvert ord i den valgte teksten.noneforlater tekstens sak og store bokstaver nøyaktig slik den ble skrevet inn.inheritgir teksten saken og kapitaliseringen av foreldrene.
Demoen under viser lowercase, uppercaseog capitalizei bruk. Ta en titt på HTML-fanen for å se hvordan teksten opprinnelig ble skrevet, og bytt deretter tilbake til resultatfanen for å se den etter at CSS er brukt.
Se pennen 0f4293fce0d14aafc3818c950ab0ded3 av mariemosley (@mariemosley) på CodePen.
Interessepunkt
capitalizevil bruke store bokstaver på ord som vises i enkle eller doble anførselstegn, og første bokstav etter en bindestrek. Den store bokstaven etter et tall vil ikke ha store bokstaver, så datoer som “4. februar 2015” vil ikke forvandles til “4. februar 2015”.
capitalizepåvirker bare de første bokstavene med ord. Det vil ikke endre tilfellet for resten av bokstavene i et ord. Hvis du for eksempel har capitalizeet ord som allerede inneholder store bokstaver, bytter ikke de andre bokstavene til ordet. Dette er hyggelig når teksten inneholder et akronym eller forkortelse som ikke skal inneholde små bokstaver.
CSS kan ikke gjøre "title case", den store bokstaven som brukes i titler på bøker, filmer, sanger og dikt, der artikler er små bokstaver (som i "Raiders of the Lost Ark"). Men det er JavaScript-løsninger for tittelsaken, inkludert David Gouchs toTitleCase ().
Mer informasjon
- teksttransformasjon ved MDN
- teksttransformasjon i W3C-spesifikasjonen
- Merknader om tilgjengeligheten av store bokstaver fra WebAIM
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | Noen | Noen | Noen | Noen | Noen | Noen |
Firefox støtter språkspesifikke regler for store bokstaver for tyrkiske språk, tysk, nederlandsk og gresk som ikke støttes av andre nettlesere. Firefox er også den eneste nettleseren som støtter text-transform: full-width;, noe som kan bidra til å forbedre lesbarheten i tekst som inneholder en blanding av latinske og østasiatiske skript. Se detaljer på MDN.