Teksti teisendamine - CSS-trikid

Anonim

text-transformVara CSS kontrollib teksti puhul ja kapitaliseeritust.

.lowercase ( text-transform: lowercase; )

Teksti teisendamise väärtused

  • lowercase muudab kõik valitud teksti tähed väikesteks.
  • uppercase muudab kõik valitud teksti tähed suurtähtedeks.
  • capitalize kirjutatakse suurtähega valitud teksti iga sõna esimene täht.
  • none jätab teksti suur- ja väiketähed täpselt selliseks, nagu see sisestati.
  • inherit annab tekstile vanema tähe ja suurtähed.

Demo näitab alljärgnev lowercase, uppercaseja capitalizekasutusel. Heitke pilk HTML-i vahekaardile, et näha, kuidas tekst algselt kirjutati, ja minge pärast CSS-i rakendamist selle vaatamiseks tagasi tulemuste vahekaardile.

Vaadake CodePenil mariemosley (@mariemosley) kirjutatud pliiatsi 0f4293fce0d14aafc3818c950ab0ded3.

Huvipunktid

capitalizekirjutab suurtähtedega sõnu, mis ilmuvad ühe- või topelt jutumärkides ning sidekriipsu järel esimese tähe sees. See ei algusta suurtähte numbri järel, nii et kuupäevad nagu „4. veebruar 2015” ei muutu tähtedeks „4. veebruar 2015”.

capitalizemõjutab ainult sõnade algustähti. See ei muuda sõna ülejäänud tähtede suurtähti. Näiteks kui kasutate capitalizesõna, mis on juba kogu suurtähega, ei lülitu sõna teised tähed väiketähtedeks. See on tore, kui teie tekst sisaldab akronüümi või lühendit, mis ei peaks sisaldama väiketähti.

CSS ei saa teha raamatu, filmi, laulu ja luuletuste pealkirjades kasutatavat suurtähtede stiili, kus artiklid on väiketähtedega (nagu jaotises „Kadunud laeva reiderid”). Kuid pealkirja puhul on olemas JavaScripti lahendused, sealhulgas David Gouchi toTitleCase ().

Rohkem informatsiooni

  • teksti teisendamine MDN-is
  • teksti teisendamine W3C spetsifikatsioonis
  • Märkused suurtähtedega teksti juurdepääsetavuse kohta WebAIM-ist

Brauseri tugi

Chrome Safari Firefox Ooper IE Android iOS
Ükskõik Ükskõik Ükskõik Ükskõik Ükskõik Ükskõik Ükskõik

Firefox toetab turgi keelte (saksa, hollandi ja kreeka) keelespetsiifilisi suurtähtede reegleid, mida teised brauserid ei toeta. Firefox on ka ainus brauser, mis toetab text-transform: full-width;, mis aitab parandada ladina ja Ida-Aasia skriptide segu sisaldava teksti loetavust. Vaadake üksikasju MDN-is.