Preoblikovanje besedila - CSS-triki

Anonim

text-transformHotel v CSS nadzoruje besedila zadevo in velike začetnice.

.lowercase ( text-transform: lowercase; )

Vrednosti za pretvorbo besedila

  • lowercase naredi vse črke v izbranem besedilu male.
  • uppercase naredi vse črke v izbranem besedilu velike.
  • capitalize velika začetnica vsake besede v izbranem besedilu.
  • none pusti veliko in malo črko besedila natanko tako, kot je bilo vneseno.
  • inherit daje besedilu primer in velike začetnice njegovega nadrejenega.

Demo spodaj prikazuje lowercase, uppercasein capitalizev uporabi. Oglejte si zavihek HTML, da vidite, kako je bilo besedilo prvotno napisano, nato pa preklopite nazaj na zavihek z rezultati, da ga vidite po uporabi CSS.

Glejte Pen 0f4293fce0d14aafc3818c950ab0ded3 avtorja mariemosley (@mariemosley) na CodePen.

Zanimivosti

capitalizebo z velikimi črkami napisal besede, ki se pojavijo znotraj enojnih ali dvojnih narekovajev in prva črka za vezajem. Prva črka za številko ne bo napisana z veliko začetnico, zato se datumi, kot je »4. februar 2015«, ne bodo spremenili v »4. februar 2015«.

capitalizevpliva samo na prve črke besed. Preostalih črk v besedi ne bo spremenil. Na primer, če imate capitalizebesedo, ki je že v vseh velikih črkah, druge črke v besedi ne bodo prešle v male črke. To je lepo, če vaše besedilo vključuje kratico ali okrajšavo, ki ne sme vsebovati malih črk.

CSS ne more narediti »naslovov«, slova velikih začetnic, ki se uporablja v naslovih knjig, filmov, pesmi in pesmi, kjer so članki z malimi črkami (kot v »Raiders of the Lost Ark«). Vendar pa obstajajo rešitve JavaScript za naslov, vključno z David Gouch-om toTitleCase ().

Več informacij

  • preoblikovanje besedila na MDN
  • preoblikovanje besedila v specifikaciji W3C
  • Opombe o dostopnosti velikega besedila iz WebAIM

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Kaj Kaj Kaj Kaj Kaj Kaj Kaj

Firefox podpira pravila uporabe velikih začetnic za turške jezike, nemščino, nizozemščino in grščino, ki jih drugi brskalniki ne podpirajo. Firefox je tudi edini brskalnik, ki podpira text-transform: full-width;, kar lahko pomaga izboljšati berljivost besedila, ki vključuje mešanico latinskih in vzhodnoazijskih pisav. Glej podrobnosti na MDN.