Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menukar teks daripada huruf kecil kepada huruf besar menggunakan CSS?

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

Susan Sarandon
Susan Sarandonasal
2024-10-31 07:47:30490semak imbas

How to Convert Text from Lowercase to Capitalize Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn