Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah Anda Mengubah Huruf Besar Teks Selepas Mengecilkannya dengan CSS?

Bolehkah Anda Mengubah Huruf Besar Teks Selepas Mengecilkannya dengan CSS?

Linda Hamilton
Linda Hamiltonasal
2024-10-31 09:08:01255semak imbas

Can You Capitalize Text After Lowercasing It with CSS?

Huruf Besar Teks Selepas Huruf Kecilkan dengan CSS

Soalan: Adakah mungkin teks huruf kecil dahulu dan kemudian gunakan huruf besar menggunakan CSS?

Contoh:

  • HELLO WORLD → Hello World

Konteks Tambahan: Anda ada senarai negara dalam huruf besar (cth., UNITED KINGDOM) dan perlu menukarnya kepada huruf kecil (cth., United Kingdom).

Jawapan:

Ya, CSS menyediakan penyelesaian untuk tugas ini:

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

CSS ini menggunakan text-transform: huruf besar harta kepada elemen dengan className kelas, secara automatik menukar semua huruf kecil kepada huruf besar dan huruf pertama setiap perkataan kepada huruf kecil.

Penyelesaian Alternatif Menggunakan JavaScript:

Jika CSS bukan pilihan, anda boleh menggunakan JavaScript untuk mencapai hasil yang sama:

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

capitalize('this IS THE wOrst string eVeR');</code>

The fungsi capitalize mengambil rentetan s sebagai input, menukarnya kepada huruf kecil menggunakan toLowerCase(), dan kemudian menggunakan kaedah ganti dengan ungkapan biasa untuk menggantikan semua sempadan perkataan (b) dengan huruf besar yang setara. Ini menggunakan huruf besar huruf pertama bagi setiap perkataan dengan berkesan sambil menggunakan huruf kecil yang lain.

Atas ialah kandungan terperinci Bolehkah Anda Mengubah Huruf Besar Teks Selepas Mengecilkannya dengan 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