CSS'deki ilk karakteri Büyük Harf Yap

255

CSS'de bir etikette ilk karakteri Büyük Harf yapmanın bir yolu var mı ?

İşte benim HTML:

<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>

Snippet'i genişlet

css

— hayatın tadını çıkar
kaynak

2

Belirtmek için - ilk karakter ve SADECE ilk karakter. text-transform: capitalize;Birden fazla kelime yaparken yeterli değil yapar

— wiktus239

623

Bunun için bir mülk var:

a.m_title {
    text-transform: capitalize;
}

Bağlantılarınız birden çok kelime içeriyorsa ve yalnızca ilk kelimenin ilk harfinin büyük harf olmasını istiyorsanız, :first-letterbunun yerine farklı bir dönüşümle kullanın (gerçekten önemli olmasa da). Sırayla söz konusu Not :first-letterçalışmamasıyla aelemanları blok konteyner olması gerekir (olabilen display: block, display: inline-blockya da bir ya da daha fazla özellikle diğer çeşitli kombinasyonlarda herhangi biri):

a.m_title {
    display: block;
}

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

— BoltClock
kaynak

3

@alanjds: Evet, IE'nin CSS'yi destekleyen her sürümünde çalışır. Çok eski bir teknoloji.

— BoltClock

3

bir çift yarı kolon kullanmak isteyebilirsiniz, bkz. css-tricks.com/almanac/selectors/f/first-letter

— ndequeker

5

@Voles: Elbette IE8 ve daha eski sürümlerini desteklemeniz gerekmiyorsa. İsterseniz çift kolon kullanamayacağınızı söylememek. ( 'S değerinde, 2 buçuk yıl önce gönderilmiş bu cevabın anda benim kişisel politikası Ne için olduğunu varsayılan olarak IE8 desteklemeye Bugün artık yok..)

— BoltClock

1

Eğer Not display: blockihtiyacı (yani niçin kim bilir) bu zorlaştırır, :first-letterayrıca çalışır display: inline-block.

— Mitya

1

@Henry Garcia De Guzman: Çünkü bu sadece ilk harfi değil (her kelimenin veya cümlenin ya da her neyin) herşeyi kapsıyor.

— BoltClock

55

Not olduğunu ::first-lettero da olmalı bu yüzden seçici, satır içi unsurlarla değil çalışır blockveya inline-blockaşağıdaki gibi:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}

— Logus
kaynak

1

Benim durumumda tüm metin zaten büyük harflerle yazılmıştı, bu yüzden .m_title'a metin dönüşümü: küçük harf eklemek zorunda kaldım ve şimdi mükemmel çalışıyor!

— hjuster

34

CSS: ilk harf Seçici

veya:

text-transform: capitalize;

— Amr Elgarhy
kaynak

15

Kullanmanızı öneririm

#selector {
    text-transform: capitalize;
}

veya

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

Bu arada, bu w3schools bağlantısını kontrol edin: http://www.w3schools.com/cssref/pr_text_text-transform.asp

— Maurizio Battaghini
kaynak

2

İyi cevap, ama bu kesinlikle w3c belgelerine bir bağlantı değil .

— Stephan

1

Lütfen dikkat: metin dönüşümü 'ilk', 'ilk harfi büyük harfe çevirme' anlamına gelmez. Aksine, 'bu özellik için başlangıç varsayılan değerine geri dön' anlamına gelir.

— Marcos Buarque

Teşekkürler, her iki önerilen düzeltmeyi de uyguladım.

— Marcos Buarque

5

Önce küçük harf yap:

.m_title {text-transform: lowercase}

Sonra ilk harf büyük yapın:

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

"text-transform: capitalize" bir sözcük için çalışır; ama cümleler için kullanmak istiyorsanız bu çözüm mükemmel.

— OzgurG
kaynak

2

: ilk harf inlineöğelerle çalışmaz , display:inline-blockbu sizin durumunuz olarak ayarlanmış . ( 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
kaynak

iş bana. concept ..paragraf her sözcük ekran ilk harf büyük harf

— Gnana Sekar

-2

CSS'de aşağıdaki kodu kullanmanızı tavsiye ederim:

    text-transform:uppercase;

Sınıfınıza koyduğunuzdan emin olun.

— Kevin Davis
kaynak