Den text-transformegendom i CSS styr text fallet och kapitalisering.
.lowercase ( text-transform: lowercase; )Text-Transform värden
lowercasegör alla bokstäver i den valda texten till gemener.uppercasegör alla bokstäver i den markerade texten versaler.capitalizekapitaliserar den första bokstaven i varje ord i den markerade texten.nonelämnar textens versaler och stora bokstäver exakt som de matades in.inheritger texten fallet och dess stora bokstäver.
Demon nedan visar lowercase, uppercaseoch capitalizei bruk. Ta en titt på HTML-fliken för att se hur texten ursprungligen skrevs och byt sedan tillbaka till resultatfliken för att se den efter att CSS har tillämpats.
Se pennan 0f4293fce0d14aafc3818c950ab0ded3 av mariemosley (@mariemosley) på CodePen.
Intressanta platser
capitalizekommer att skriva stora bokstäver med ord som visas i enkla eller dubbla citat och första bokstaven efter ett bindestreck. Den första bokstaven kommer inte att verseras efter ett nummer, så datum som "4 februari 2015" förvandlas inte till "4 februari 2015".
capitalizepåverkar bara de första bokstäverna med ord. Det ändrar inte fallet för resten av bokstäverna i ett ord. Om du till exempel har capitalizeett ord som redan finns i alla stora bokstäver byter inte de andra bokstäverna till ordet. Det här är trevligt när din text innehåller en akronym eller förkortning som inte ska innehålla små bokstäver.
CSS kan inte göra "title case", den versalerstil som används i titlar på böcker, filmer, sånger och dikter, där artiklar är små bokstäver (som i "Raiders of the Lost Ark"). Men det finns JavaScript-lösningar för titelfall, inklusive David Gouchs toTitleCase ().
Mer information
- text-transform vid MDN
- text-transformation i W3C Spec
- Anteckningar om tillgängligheten av versaler från WebAIM
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Några | Några | Några | Några | Några | Några | Några |
Firefox stöder språkspecifika regler för versaler för turkiska, tyska, nederländska och grekiska som inte stöds av andra webbläsare. Firefox är också den enda webbläsaren som stöder text-transform: full-width;, vilket kan förbättra läsbarheten i text som innehåller en blandning av latinska och östasiatiska skript. Se detaljer på MDN.