Tekst-transformation - CSS-tricks

Anonim

Den text-transformejendom i CSS styrer tekst sag og store bogstaver.

.lowercase ( text-transform: lowercase; )

Teksttransformationsværdier

  • lowercase gør alle bogstaverne i den valgte tekst til små bogstaver.
  • uppercase gør alle bogstaverne i den valgte tekst med store bogstaver.
  • capitalize store bogstaver i hvert ord i den valgte tekst.
  • none efterlader tekstens bogstav og store bogstaver nøjagtigt som det blev indtastet.
  • inherit giver teksten sagen og dens store bogstaver.

Demoen herunder viser lowercase, uppercaseog capitalizei brug. Se på HTML-fanen for at se, hvordan teksten oprindeligt blev skrevet, og skift derefter tilbage til resultatfanen for at se den, efter at CSS er anvendt.

Se pennen 0f4293fce0d14aafc3818c950ab0ded3 af mariemosley (@mariemosley) på CodePen.

Interessepunkter

capitalizevil skrive store bogstaver i ord, der vises i enkelt- eller dobbeltcitater, og det første bogstav efter en bindestreg. Det store bogstav vil ikke blive brugt efter et tal, så datoer som "4. februar 2015" transformeres ikke til "4. februar 2015".

capitalizepåvirker kun de første bogstaver med ord. Det ændrer ikke tilfældet med resten af ​​bogstaverne i et ord. For eksempel, hvis du capitalizeet ord, der allerede findes i alle store bogstaver, skifter de andre bogstaver i ordet ikke til små bogstaver. Dette er rart, når din tekst indeholder et akronym eller en forkortelse, der ikke skal indeholde små bogstaver.

CSS kan ikke gøre "titelbogstav", den store bogstav, der bruges i titler på bøger, film, sange og digte, hvor artikler er små (som i "Raiders of the Lost Ark"). Men der er JavaScript-løsninger til titelsagen, herunder David Gouchs toTitleCase ().

Mere information

  • tekst-transformation ved MDN
  • tekst-transformation i W3C Spec
  • Bemærkninger om tilgængeligheden af ​​store bogstaver fra WebAIM

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Nogen Nogen Nogen Nogen Nogen Nogen Nogen

Firefox understøtter sprogspecifikke regler for store bogstaver for tyrkiske sprog, tysk, hollandsk og græsk, der ikke understøttes af andre browsere. Firefox er også den eneste browser, der understøtter text-transform: full-width;, hvilket kan hjælpe med at forbedre læsbarheden af ​​tekst, der indeholder en blanding af latinske og østasiatiske scripts. Se detaljer på MDN.