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,

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

34

CSS: Selektor pierwszego litery

lub:

text-transform: capitalize;

— Amr Elgarhy
źródło

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