Bagaimanakah saya boleh menggunakan huruf besar Hanya Huruf Pertama Setiap Perkataan dalam CSS Sambil Mengekalkan Semua Huruf Sedia Ada?

Transformasi teks CSS: gunakan huruf besar Dilema Semua Huruf Besar

Sifat transformasi teks dalam CSS mengawal huruf besar teks. Apabila ditetapkan kepada "huruf besar", ia menggunakan huruf besar pada huruf pertama setiap perkataan. Walau bagaimanapun, ini menimbulkan cabaran apabila berurusan dengan perkataan yang sudah dalam huruf besar semua.

Masalahnya

Dalam coretan HTML dan CSS yang disediakan:

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

.link {
  text-transform: capitalize;
}

Keluaran ialah "Huruf Kecil & HURUF BESAR SEMUA," manakala keluaran yang dikehendaki ialah "Huruf Kecil & Semua Huruf Besar."

Penyelesaian

Untuk mencapai hasil yang diingini, gabungan peraturan CSS boleh digunakan:

.link {
  text-transform: lowercase;
}

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

• Peraturan text-transform: huruf kecil menukar semua teks dalam elemen ".link" kepada huruf kecil.
• Peraturan text-transform: huruf besar digunakan pada pseudo-element :huruf pertama dan :first-line masing-masing menggunakan huruf besar pada huruf pertama dan baris pertama setiap elemen.

Pendekatan ini memastikan bahawa perkataan yang sudah dalam huruf besar semua (seperti "SEMUA HURUF BESAR") dikekalkan sambil masih menggunakan huruf besar pada huruf pertama perkataan lain. Output yang terhasil ialah:

Small Caps 
All Caps

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan huruf besar Hanya Huruf Pertama Setiap Perkataan dalam CSS Sambil Mengekalkan Semua Huruf Sedia Ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!