Tornar o primeiro caractere em maiúsculas em CSS

255

Existe uma maneira de tornar o primeiro caractere em maiúscula em um rótulo em CSS.

Aqui está o meu 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>
Expandir snippet

css Aproveite a vida
fonte
2
Para especificar - o primeiro caractere e APENAS o primeiro. O que torna o text-transform: capitalize;não é suficiente quando se tem várias palavras
wiktus239

Respostas:

622

Há uma propriedade para isso:

a.m_title {
    text-transform: capitalize;
}

Se seus links puderem conter várias palavras e você desejar que apenas a primeira letra da primeira palavra seja maiúscula, use :first-letteruma transformação diferente (embora isso realmente não importe). Note-se que, a fim de :first-letterpara trabalhar os aelementos precisam de ser recipientes em bloco (que pode ser display: block, display: inline-blockou qualquer um de uma variedade de outras combinações de uma ou mais propriedades):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}
BoltClock
fonte
3
@alanjds: Sim, ele funciona em todas as versões do IE que suportam CSS. É uma tecnologia muito antiga.
BoltClock
3
você pode querer usar um ponto e vírgula duplo, consulte css-tricks.com/almanac/selectors/f/first-letter
ndequeker
5
@Voles: Claro, se você não precisa oferecer suporte ao IE8 e mais antigo. Não estou dizendo que você não poderia usar dois pontos se quisesse. (Por que vale a pena, no momento desta resposta que foi publicado 2 anos e meio atrás, a minha política pessoal foi para apoiar IE8 por padrão Hoje eu já não fazer..)
BoltClock
1
Observe que, se o display: blockrequisito (quem sabe o motivo) dificulta isso, :first-lettertambém funciona display: inline-block.
Mitya
1
@ Henry Garcia De Guzman: Porque isso coloca tudo em maiúsculas, não apenas a primeira letra (de cada palavra, frase ou qualquer outra coisa).
BoltClock
55

Observe que o ::first-letterseletor não funciona com elementos embutidos; portanto, ele deve ser um blockou inline-block, da seguinte maneira:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Logus
fonte
1
No meu caso, o texto inteiro já estava em maiúsculas, então tive que adicionar transformação de texto: minúscula em .m_title e agora funciona perfeitamente!
hjuster
15

Eu sugiro usar

#selector {
    text-transform: capitalize;
}

ou

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

A propósito, verifique este link do w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Maurizio Battaghini
fonte
2
Boa resposta, mas esse definitivamente não é um link para a documentação do w3c.
Stephan
1
Ei, observe: a transformação de texto 'inicial' não significa 'colocar em maiúscula a primeira letra'. Em vez disso, significa 'reverter para o valor inicial padrão para esta propriedade'.
Marcos Buarque
Obrigado, apliquei as duas correções recomendadas.
Marcos Buarque
5

Coloque-o em minúsculas primeiro:

.m_title {text-transform: lowercase}

Em seguida, coloque a primeira letra maiúscula:

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

"text-transform: capitalize" funciona para uma palavra; mas se você deseja usar para frases, esta solução é perfeita.

OzgurG
fonte
2
: a primeira letra não funciona com inlineelementos, defina como display:inline-blockse for esse o seu caso. ( stackoverflow.com/questions/7631722/… )
Fanky 9/04/19
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
fonte
é trabalhar comigo. conceito ..paragraph cada palavra em exibição primeiras tampas de carta
Gnana Sekar
-2

Eu recomendo que você use o seguinte código em CSS:

    text-transform:uppercase;

Certifique-se de colocá-lo em sua classe.

Kevin Davis
fonte