The text-transformharta di CSS mengawal kes teks dan permodalan.
.lowercase ( text-transform: lowercase; )Teks-Nilai Transformasi
lowercasemenjadikan semua huruf dalam teks yang dipilih menjadi huruf kecil.uppercasemenjadikan semua huruf dalam teks yang dipilih menjadi huruf besar.capitalizemenggunakan huruf besar setiap perkataan dalam teks yang dipilih.nonemeninggalkan huruf besar dan huruf besar persis seperti yang dimasukkan.inheritmemberikan teks kes dan penggunaan huruf besar dari induknya.
Demo di bawah menunjukkan lowercase, uppercasedan capitalizedigunakan. Lihatlah tab HTML untuk melihat bagaimana teks asalnya ditulis, kemudian beralih kembali ke tab hasil untuk melihatnya setelah CSS diterapkan.
Lihat Pen 0f4293fce0d14aafc3818c950ab0ded3 oleh mariemosley (@mariemosley) di CodePen.
Tempat Menarik
capitalizeakan menggunakan huruf besar yang muncul dalam tanda kutip tunggal atau ganda, dan huruf pertama selepas tanda hubung. Huruf tidak akan menggunakan huruf besar setelah angka, jadi tarikh seperti "4 Februari 2015" tidak akan berubah menjadi "4 Februari 2015".
capitalizehanya mempengaruhi huruf pertama perkataan. Ini tidak akan mengubah huruf yang selebihnya dalam satu perkataan. Contohnya, jika anda sudah capitalizememiliki kata yang sudah ada dalam huruf besar, huruf lain dalam kata tersebut tidak akan beralih ke huruf kecil. Ini bagus apabila teks anda menyertakan akronim atau singkatan yang tidak boleh menyertakan huruf kecil.
CSS tidak dapat melakukan "case case", gaya penggunaan huruf besar dalam judul buku, filem, lagu, dan puisi, di mana artikel adalah huruf kecil (seperti dalam "Raiders of the Lost Ark"). Tetapi, ada penyelesaian JavaScript untuk kes tajuk, termasuk toTitleCase David Gouch ().
Maklumat lanjut
- transformasi teks di MDN
- transformasi teks dalam W3C Spec
- Catatan mengenai kebolehcapaian teks huruf besar dari WebAIM
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sebarang | Sebarang | Sebarang | Sebarang | Sebarang | Sebarang | Sebarang |
Firefox menyokong peraturan penggunaan huruf besar untuk bahasa Turki, Jerman, Belanda, dan Yunani yang tidak disokong oleh penyemak imbas lain. Firefox juga satu-satunya penyemak imbas yang menyokong text-transform: full-width;, yang dapat membantu meningkatkan keterbacaan teks yang merangkumi campuran skrip latin dan Asia Timur. Lihat perincian di MDN.