Textová transformace - Triky CSS

Anonim

text-transformVlastnost CSS řídí textu případu a velkých písmen.

.lowercase ( text-transform: lowercase; )

Hodnoty transformace textu

  • lowercase udělá všechna písmena ve vybraném textu malými písmeny.
  • uppercase udělá všechna písmena ve vybraném textu velkými písmeny.
  • capitalize velká písmena prvního písmene každého slova ve vybraném textu.
  • none ponechá velká a malá písmena v textu přesně tak, jak byla zadána.
  • inherit dává textu velká a malá písmena jeho rodiče.

Demo níže show lowercase, uppercasea capitalizev provozu. Podívejte se na kartu HTML, abyste zjistili, jak byl text původně napsán, a poté přepněte zpět na kartu výsledků, abyste jej viděli po použití CSS.

Podívejte se na pero 0f4293fce0d14aafc3818c950ab0ded3 od mariemosley (@mariemosley) na CodePen.

Body zájmu

capitalizebude velká slova, která se objeví uvnitř jednoduchých nebo dvojitých uvozovek, a první písmeno za pomlčkou. Nebude psát první písmeno za číslem, takže data jako „4. února 2015“ se nebudou transformovat na „4. února 2015“.

capitalizeovlivní pouze první písmena slov. Nezmění to velikost písmen zbývajících ve slově. Například pokud máte capitalizeslovo, které už má všechna velká písmena, ostatní písmena ve slově se nepřepnou na malá písmena. To je hezké, když váš text obsahuje zkratku nebo zkratku, která by neměla obsahovat žádná malá písmena.

CSS neumí „case title“, styl psaní velkých písmen používaný v titulech knih, filmů, písní a básní, kde jsou články malými písmeny (jako v „Dobyvatelích ztracené archy“). Existují však řešení JavaScriptu pro případ titulu, včetně toTitleCase () Davida Goucha.

Více informací

  • textová transformace na MDN
  • textová transformace ve specifikaci W3C
  • Poznámky k přístupnosti velkého textu z WebAIM

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
Žádný Žádný Žádný Žádný Žádný Žádný Žádný

Firefox podporuje pravidla pro velká písmena specifická pro jazyky v turkických jazycích, němčině, holandštině a řečtině, které jiné prohlížeče nepodporují. Firefox je také jediný prohlížeč, který podporuje text-transform: full-width;, což může pomoci zlepšit čitelnost textu, který obsahuje kombinaci latinských a východoasijských skriptů. Zobrazit podrobnosti na MDN.