Textová transformácia - Triky CSS

Anonim

text-transformVlastnosť CSS riadi textu prípadu a veľkých písmen.

.lowercase ( text-transform: lowercase; )

Hodnoty textovej transformácie

  • lowercase urobí všetky písmená vo vybranom texte malými písmenami.
  • uppercase urobí všetky písmená vo vybranom texte veľkými písmenami.
  • capitalize veľké písmená prvého slova každého slova vo vybranom texte.
  • none ponechá veľkosť a veľké písmená textu presne tak, ako bolo zadané.
  • inherit dáva textu veľkosť a veľké písmená jeho rodiča.

Demo nižšie show lowercase, uppercasea capitalizev prevádzke. Prezrite si kartu HTML, aby ste zistili, ako bol text pôvodne napísaný. Potom sa vráťte späť na kartu s výsledkami a po použití CSS ho uvidíte.

Prečítajte si pero 0f4293fce0d14aafc3818c950ab0ded3 od spoločnosti mariemosley (@mariemosley) na stránke CodePen.

Body záujmu

capitalizepoužije veľké a veľké písmená slová, ktoré sa nachádzajú v jednoduchých alebo dvojitých úvodzovkách, a prvé písmeno za pomlčkou. Nebude písať prvé písmeno za veľkým písmenom, takže dátumy ako „4. februára 2015“ sa nepremenia na „4. februára 2015“.

capitalizeovplyvňuje iba prvé písmená slov. To nezmení veľkosť písmen zvyšných písmen v jednom slove. Napríklad ak máte capitalizeslovo, ktoré už má veľké písmená, ostatné písmená v tomto slove sa neprepnú na malé písmená. Je to pekné, keď váš text obsahuje skratku alebo skratku, ktorá by nemala obsahovať žiadne malé písmená.

CSS nemôže robiť „case case“, štýl veľkých písmen používaný v tituloch kníh, filmov, piesní a básní, kde sú články malými písmenami (ako v „Dobyvateľoch stratenej archy“). Existujú však riešenia JavaScriptu pre veľké písmená, vrátane toTitleCase () od Davida Goucha.

Viac informácií

  • transformácia textu na MDN
  • textová transformácia v špecifikácii W3C
  • Poznámky o prístupnosti veľkého textu z WebAIM

Podpora prehľadávača

Chrome Safari Firefox Opera IE Android iOS
akýkoľvek akýkoľvek akýkoľvek akýkoľvek akýkoľvek akýkoľvek akýkoľvek

Firefox podporuje pravidlá používania veľkých písmen v konkrétnych jazykoch pre turkické jazyky, nemčinu, holandčinu a gréčtinu, ktoré iné prehľadávače nepodporujú. Firefox je tiež jediný podporovaný prehľadávač text-transform: full-width;, ktorý môže pomôcť zlepšiť čitateľnosť textu, ktorý obsahuje kombináciu latinských a východoázijských skriptov. Podrobnosti nájdete na MDN.