Teksto transformavimas - CSS-gudrybės

Anonim

text-transformCSS nuosavybė kontroliuoja teksto bylą ir kapitalizaciją.

.lowercase ( text-transform: lowercase; )

Teksto keitimo vertės

  • lowercase daro visas pasirinkto teksto raides mažąsias.
  • uppercase visas pasirinkto teksto raides paverčia didžiosiomis raidėmis.
  • capitalize rašoma didele kiekvieno pasirinkto teksto žodžio raide.
  • none teksto raidės ir didžiosios raidės paliekamos tiksliai tokios, kokios buvo įvestos.
  • inherit pateikia tekstui jo tėvų didžiąsias ir mažąsias raides.

Demo žemiau rodo lowercase, uppercaseir capitalizenaudoti. Pažvelkite į HTML skirtuką, kad pamatytumėte, kaip tekstas buvo parašytas iš pradžių, tada pereikite atgal į rezultatų skirtuką, kad pamatytumėte jį pritaikius CSS.

Peržiūrėkite mariemosley (@mariemosley) „CodePen“ rašiklį 0f4293fce0d14aafc3818c950ab0ded3.

Lankytinos vietos

capitalizerašys didžiąja raide žodžius, atsirandančius viengubose arba dvigubose kabutėse, ir pirmąją raidę po brūkšnio. Pirmoji raidė po skaičiaus nebus rašoma didžiąja raide, todėl tokios datos kaip „2015 m. Vasario 4 d.“ Netaps „2015 m. Vasario 4 d.“.

capitalizeveikia tik pirmąsias žodžių raides. Tai nepakeis likusių žodžio raidžių raidžių. Pvz., Jei turite capitalizežodį, kuris jau rašomas didžiosiomis raidėmis, kitos žodžio raidės nepersijungs į mažąsias. Tai puiku, kai jūsų tekste yra akronimas ar santrumpa, kurioje neturėtų būti jokių mažųjų raidžių.

CSS negali atlikti didžiųjų raidžių, vadinamų didžiosiomis raidėmis, naudojamų knygų, filmų, dainų ir eilėraščių pavadinimuose, kai straipsniai yra mažosios raidės (kaip „Pamestos arkos plėšikai“). Tačiau yra „JavaScript“ sprendimų pavadinimo atveju, įskaitant Davido Goucho „toTitleCase“ ().

Daugiau informacijos

  • teksto transformacija MDN
  • teksto transformavimas W3C specifikacijoje
  • Pastabos apie didžiųjų raidžių teksto prieinamumą iš „WebAIM“

Naršyklės palaikymas

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks Bet koks Bet koks Bet koks Bet koks

„Firefox“ palaiko turkų kalbų, vokiečių, olandų ir graikų kalbų specifines didžiųjų raidžių taisykles, kurių nepalaiko kitos naršyklės. „Firefox“ taip pat yra vienintelė palaikoma naršyklė text-transform: full-width;, kuri gali padėti pagerinti teksto, kuriame yra lotynų ir rytų Azijos scenarijų derinį, įskaitomumą. Žr. Išsamią informaciją MDN.