Buat huruf besar karakter pertama di CSS

255

Apakah ada cara untuk membuat huruf besar karakter pertama dalam label di CSS.

Inilah HTML saya:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>
Luaskan cuplikan

css menikmati hidup
sumber
2
Untuk menentukan - karakter pertama dan HANYA yang pertama. Yang membuat text-transform: capitalize;tidak cukup ketika memiliki beberapa kata
wiktus239

Jawaban:

622

Ada properti untuk itu:

a.m_title {
    text-transform: capitalize;
}

Jika tautan Anda dapat berisi banyak kata dan Anda hanya ingin huruf pertama dari kata pertama menjadi huruf besar, gunakan :first-letterdengan transformasi yang berbeda sebagai gantinya (meskipun itu tidak terlalu penting). Perhatikan bahwa dalam rangka untuk :first-letterbekerja Anda aelemen perlu wadah blok (yang bisa display: block, display: inline-blockatau salah satu dari berbagai kombinasi lain dari satu atau lebih sifat):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}
BoltClock
sumber
3
@alanjds: Ya, ini berfungsi di setiap versi IE yang mendukung CSS. Ini teknologi yang sangat tua.
BoltClock
3
Anda mungkin ingin menggunakan titik koma
ndequeker
5
@Voles: Tentu jika Anda tidak perlu mendukung IE8 dan yang lebih lama. Tidak mengatakan Anda tidak dapat menggunakan titik dua jika Anda mau. (Untuk apa nilainya, pada saat jawaban ini yang diposting 2 setengah tahun yang lalu, kebijakan pribadi saya adalah untuk mendukung IE8 secara default. Hari ini saya tidak lagi melakukannya.)
BoltClock
1
Catatan, jika display: blockpersyaratan (siapa yang tahu mengapa itu) membuat ini sulit, :first-letterjuga berfungsi dengan baik display: inline-block.
Mitya
1
@ Henry Garcia De Guzman: Karena itu mengurung segalanya, bukan hanya huruf pertama (dari setiap kata atau kalimat atau apa pun).
BoltClock
55

Perhatikan bahwa ::first-letterpemilih tidak bekerja dengan elemen sebaris, sehingga harus salah satu blockatau inline-block, sebagai berikut:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Logus
sumber
1
Dalam kasus saya seluruh teks sudah dalam huruf kapital, jadi saya harus menambahkan text-transform: huruf kecil ke .m_title dan sekarang berfungsi dengan sempurna!
hjuster
15

Saya sarankan untuk digunakan

#selector {
    text-transform: capitalize;
}

atau

#selector::first-letter {
    text-transform: uppercase;
}

Omong-omong, periksa tautan w3schools ini: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Maurizio Battaghini
sumber
2
Jawaban yang bagus, tapi itu jelas bukan tautan ke dokumentasi w3c.
Stephan
1
Hai, harap dicatat: transformasi teks 'awal' tidak berarti 'huruf besar huruf pertama'. Sebaliknya, ini berarti 'kembalikan ke nilai awal dan default untuk properti ini'.
Marcos Buarque
Terima kasih, saya telah menerapkan kedua perbaikan yang disarankan.
Marcos Buarque
5

Buat huruf kecil dulu:

.m_title {text-transform: lowercase}

Lalu buat menjadi huruf besar pertama:

.m_title:first-letter {text-transform: uppercase}

"text-transform: capitalize" berfungsi untuk sebuah kata; tetapi jika Anda ingin menggunakan untuk kalimat solusi ini sangat cocok.

OzgurG
sumber
2
: huruf pertama tidak berfungsi dengan inlineelemen, setel ke display:inline-blockapakah ini adalah kasus Anda. ( stackoverflow.com/questions/7631722/... )
Fanky
1 
<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>
Gnana Sekar
sumber
ini berhasil saya. konsep ..paragraf setiap kata dalam tampilan huruf pertama
Gnana Sekar
-2

Saya akan merekomendasikan agar Anda menggunakan kode berikut dalam CSS:

    text-transform:uppercase;

Pastikan Anda memasukkannya ke dalam kelas Anda.

Kevin Davis
sumber