Szöveg-átalakítás - CSS-trükkök

Anonim

A text-transformCSS-ben lévő tulajdonság vezérli a kis- és nagybetűket.

.lowercase ( text-transform: lowercase; )

Szöveg-transzformációs értékek

  • lowercase a kiválasztott szöveg összes betűjét kisbetűvé teszi.
  • uppercase a kijelölt szöveg összes betűjét nagybetűvé teszi.
  • capitalize nagybetűvel írja be a kiválasztott szöveg minden egyes szavának első betűjét.
  • none pontosan úgy hagyja el a szöveg kis- és nagybetűit, ahogyan beírta.
  • inherit megadja a szövegnek a szülőjének kis- és nagybetűit.

A demó is mutatja lowercase, uppercaseés capitalizehasználatban van. Vessen egy pillantást a HTML fülre, és nézze meg, hogy a szöveg eredetileg hogyan íródott, majd váltson vissza az eredmények fülre, és nézze meg azt a CSS alkalmazása után.

Lásd: Mariemosley (@mariemosley) Pen 0f4293fce0d14aafc3818c950ab0ded3 toll a CodePen-en

Látványosság

capitalizenagybetűket ír az egy- vagy dupla idézőjelben, valamint a kötőjel utáni első betűben. Ez nem írja be a nagybetűket egy szám után, így az olyan dátumok, mint a „2015. február 4.”, nem válnak „2015. február 4-ig”.

capitalizecsak a szavak első betűire hat. Ez nem változtatja meg a többi betű nagybetűjét. Például, ha capitalizeegy szót már nagybetűvel ír, akkor a szó többi betűje nem vált kisbetűvé. Ez akkor jó, ha a szövege olyan rövidítést vagy rövidítést tartalmaz, amely nem tartalmazhat kisbetűket.

A CSS nem képes a „kis- és nagybetűs írásmódra”, a nagybetűs írásmódra, amelyet a könyvek, filmek, dalok és versek címeiben használnak, ahol a cikkek kisbetűsek (például az „Elveszett Bárka Raiderei” -nél). De léteznek JavaScript megoldások a kis- és nagybetűk esetében, beleértve David Gouch toTitleCase () -jét.

Több információ

  • szöveg-transzformáció az MDN-nél
  • szöveg-transzformáció a W3C Spec
  • Megjegyzések a nagybetűs szöveg hozzáférhetőségéről a WebAIM-ból

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
Bármi Bármi Bármi Bármi Bármi Bármi Bármi

A Firefox támogatja a török ​​nyelvek, német, holland és görög nyelv specifikus nagybetűs szabályait, amelyeket más böngészők nem támogatnak. A Firefox az egyetlen olyan böngésző, amely támogatja text-transform: full-width;, amely elősegítheti a latin és a kelet-ázsiai szkriptek keverékét tartalmazó szöveg olvashatóságának javítását. A részleteket lásd az MDN-n.