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

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

34

CSS: Seletor de primeira letra

ou:

text-transform: capitalize;

— Amr Elgarhy
fonte

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