Pretvorba teksta - CSS-trikovi

Anonim

text-transformNekretnina u CSS kontrolira mala slova teksta i slova.

.lowercase ( text-transform: lowercase; )

Vrijednosti transformacije teksta

  • lowercase čini sva slova u odabranom tekstu malim slovima.
  • uppercase čini sva slova u odabranom tekstu velikim slovima.
  • capitalize velikim slovom stavlja prvo slovo svake riječi u odabranom tekstu.
  • none ostavlja velika i mala slova teksta onako kako je unesen.
  • inherit daje tekstu padež i velika slova njegova roditelja.

Demo ispod pokazuje lowercase, uppercasete capitalizeu upotrebi. Pogledajte karticu HTML da biste vidjeli kako je tekst izvorno napisan, a zatim se vratite na karticu rezultata da biste je vidjeli nakon primjene CSS-a.

Pogledajte Olovku 0f4293fce0d14aafc3818c950ab0ded3 tvrtke mariemosley (@mariemosley) na CodePenu.

Točke interesa

capitalizenapisat će velikim slovima riječi koje se pojavljuju unutar jednostrukih ili dvostrukih navodnika, a prvo slovo nakon crtice. Prvo slovo nakon broja neće biti napisano velikim početnim slovom, pa se datumi poput "4. veljače 2015." neće transformirati u "4. veljače 2015.".

capitalizeutječe samo na prva slova riječi. To neće promijeniti slučaj ostatka slova u riječi. Na primjer, ako imate capitalizeriječ koja je već u svim velikim slovima, ostala slova u riječi neće se prebaciti na mala slova. To je lijepo kad vaš tekst sadrži kraticu ili kraticu koja ne smije sadržavati mala slova.

CSS ne može napraviti "slučaj velikih slova", stil pisanja velikih slova koji se koristi u naslovima knjiga, filmova, pjesama i pjesama, gdje su članci malim slovima (kao u "Raiders of the Lost Ark"). Ali, postoje JavaScript rješenja za naslove, uključujući toTitleCase () Davida Goucha.

Više informacija

  • pretvorba teksta na MDN
  • transformacija teksta u specifikaciji W3C
  • Bilješke o pristupačnosti velikog teksta s WebAIM-a

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji Bilo koji

Firefox podržava pravila pisanja velikih slova za turske jezike, njemački, nizozemski i grčki koja nisu podržana u drugim preglednicima. Firefox je također jedini preglednik koji podržava text-transform: full-width;, što može poboljšati čitljivost teksta koji uključuje mješavinu latiničnih i istočnoazijskih skripti. Pogledajte detalje na MDN.