Bagaimana untuk menukar teks daripada huruf kecil kepada huruf besar menggunakan CSS?

Transformasi Teks CSS: Huruf Kecil ke Huruf Besar

Bolehkah anda tweak teks untuk mengubahnya daripada huruf kecil kepada huruf besar menggunakan CSS?

Memahami Keperluan

Pertimbangkan senario di mana anda mahu teks diformatkan mengikut cara berikut:

• huruf kecil dahulu, kemudian gunakan huruf besar hanya huruf pertama bagi setiap perkataan .
• Input: HELLO WORLD
• Output: Hello World

Contoh lain mungkin senarai negara dalam semua huruf besar, seperti: UNITED KINGDOM, yang anda perlu menukar kepada: United Kingdom.

Pelaksanaan CSS

Ya, CSS menyediakan sifat transformasi teks untuk mencapai matlamat ini. Dengan menetapkannya kepada "huruf besar", anda boleh menggunakan huruf besar pada huruf pertama setiap perkataan sambil menukar aksara yang tinggal kepada huruf kecil.

<code class="css">.className {
    text-transform: capitalize;
}</code>

Peraturan CSS ini digunakan pada elemen dengan nama kelas className, mengubah teksnya dengan sewajarnya .

Javascript Solution

Selain CSS, JavaScript juga boleh digunakan untuk mencapai transformasi teks:

<code class="javascript">function capitalize(s) {
    return s.toLowerCase().replace(/\b./g, function (a) {
        return a.toUpperCase();
    });
}

console.log(capitalize('this IS THE wOrst string eVeR')); // "This Is The Worst String Ever"</code>

Fungsi ini mengambil rentetan sebagai input, menukarkannya kepada huruf kecil, dan kemudian menggunakan ungkapan biasa untuk mengenal pasti sempadan perkataan (b) dan menggunakan huruf besar bagi aksara pertama bagi setiap perkataan yang dikenal pasti.

Nota: Kredit untuk fungsi JavaScript pergi kepada sumber berikut: Huruf huruf besar perkataan dalam rentetan.

Atas ialah kandungan terperinci Bagaimana untuk menukar teks daripada huruf kecil kepada huruf besar menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!