Bagaimanakah Saya Boleh Menggunakan `teks-transformasi: huruf besar` Tanpa Menjejaskan Perkataan Semua Huruf Besar?

Mengatasi perubahan teks CSS: Gunakan huruf besar untuk Semua Teks Huruf Besar

Masalah:

Menggunakan transformasi teks CSS: huruf besar ; peraturan untuk menukar teks semua huruf besar kepada huruf besar ayat menjadikan bermasalah apabila huruf awal perkataan sedemikian sememangnya memerlukan huruf besar, seperti kata nama khas atau akronim.

Seperti yang ditunjukkan dalam coretan kod berikut, output yang dikehendaki bagi "Small Caps & All Caps" bukan dicapai:

HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

CSS:

.link {text-transform: capitalize;}

Keputusan:

Small Caps & ALL CAPS

Penyelesaian:

Kepada mencapai tingkah laku huruf besar yang diingini sambil mengekalkan teks-transform: huruf besar; peraturan, CSS berikut boleh dilaksanakan:

.link {
  text-transform: lowercase;
}
.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

Pengubahsuaian ini mengubah semua teks kepada huruf kecil pada mulanya, kemudian huruf besar semula huruf pertama setiap perkataan dan baris pertama teks.

Keputusan:

Small Caps
All Caps

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan `teks-transformasi: huruf besar` Tanpa Menjejaskan Perkataan Semua Huruf Besar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!