Zrób pierwszy znak wielkimi literami w CSS

255

Czy istnieje sposób, aby pierwszy znak był pisany wielką etykietą w CSS?

Oto mój 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>
Rozwiń fragment kodu

css ciesz się życiem
źródło
2
Aby określić - pierwszy znak i TYLKO pierwszy. Co sprawia, że text-transform: capitalize;nie wystarczy mieć wiele słów
wiktus239,

Odpowiedzi:

622

Jest do tego właściwość:

a.m_title {
    text-transform: capitalize;
}

Jeśli Twoje linki mogą zawierać wiele słów, a chcesz, aby pierwsza litera pierwszego słowa była pisana wielkimi literami, użyj :first-letterzamiast tego innej transformacji (chociaż tak naprawdę nie ma to znaczenia). Uwaga, że aby :first-letterpracować na swój aelementy muszą być pojemniki blokowe (co może być display: block, display: inline-blocklub którykolwiek z wielu innych kombinacji jednej lub więcej właściwości):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}
BoltClock
źródło
3
@alanjds: Tak, działa w każdej wersji IE, która obsługuje CSS. To bardzo stara technologia.
BoltClock
3
możesz użyć podwójnego średnika, patrz css-tricks.com/almanac/selectors/f/first-letter
ndequeker
5
@Voles: Pewnie, jeśli nie potrzebujesz obsługi IE8 i starszych. Nie mówiąc, że nie możesz użyć podwójnych dwukropków, jeśli chcesz. (Jeśli chodzi o wartość, w momencie udzielania odpowiedzi 2 i pół roku temu moją osobistą polityką było domyślnie wspieranie IE8. Dziś już tego nie robię.)
BoltClock
1
Uwaga: jeśli display: blockwymaganie (kto wie, dlaczego tak jest) utrudnia to, :first-letterrównież działa display: inline-block.
Mitya,
1
@Henry Garcia De Guzman: Bo to wielkie litery wszystko, nie tylko pierwsza litera (każdego słowa, zdania lub czegokolwiek).
BoltClock
55

Zauważ, że ::first-letterselektor nie działa z elementami wbudowanymi, więc musi być albo, blockalbo inline-block, jak następuje:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Logus
źródło
1
W moim przypadku cały tekst był już pisany wielkimi literami, więc musiałem dodać transformację tekstu: małe litery do .m_title, a teraz działa idealnie!
hjuster
15

Proponuję użyć

#selector {
    text-transform: capitalize;
}

lub

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

Przy okazji, sprawdź ten link w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Maurizio Battaghini
źródło
2
Dobra odpowiedź, ale zdecydowanie nie jest to link do dokumentacji w3c.
Stephan
1
Hej, pamiętaj: transformacja tekstu „inicjał” nie oznacza „wielkich liter pierwszej litery”. Oznacza to raczej „przywróć początkową wartość domyślną dla tej właściwości”.
Marcos Buarque,
Dzięki, zastosowałem obie zalecane poprawki.
Marcos Buarque
5

Najpierw małymi literami:

.m_title {text-transform: lowercase}

Następnie ustaw pierwszą literę na wielką:

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

„text-transform: capitalize” działa na słowo; ale jeśli chcesz używać zdań, to rozwiązanie jest idealne.

OzgurG
źródło
2
: pierwsza litera nie działa z inlineelementami, ustaw na display:inline-blockjeśli tak jest w twoim przypadku. ( 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
źródło
to działa na mnie. koncepcja ... akapit każde wyświetlone słowo wielkie litery
Gnana Sekar
-2

Polecam użycie następującego kodu w CSS:

    text-transform:uppercase;

Upewnij się, że umieścisz go w swojej klasie.

Kevin Davis
źródło