A text-transformpropriedade em CSS controla as maiúsculas e minúsculas do texto.
.lowercase ( text-transform: lowercase; )Valores de transformação de texto
lowercasetorna todas as letras do texto selecionado em minúsculas.uppercasetorna todas as letras do texto selecionado em maiúsculas.capitalizecoloca em maiúscula a primeira letra de cada palavra no texto selecionado.nonedeixa as letras maiúsculas e minúsculas do texto exatamente como foram inseridas.inheritdá ao texto as maiúsculas e minúsculas de seu pai.
A demonstração abaixo mostra lowercase, uppercasee capitalizeem uso. Dê uma olhada na guia HTML para ver como o texto foi escrito originalmente e, em seguida, volte para a guia de resultados para vê-lo depois que o CSS for aplicado.
Veja a Caneta 0f4293fce0d14aafc3818c950ab0ded3 de mariemosley (@mariemosley) em CodePen.
Pontos de interesse
capitalizecolocará em maiúscula as palavras que aparecem entre aspas simples ou duplas e a primeira letra após um hífen. A primeira letra após um número não será maiúscula, então datas como “4 de fevereiro de 2015” não serão transformadas em “4 de fevereiro de 2015”.
capitalizeafeta apenas as primeiras letras das palavras. Isso não mudará o caso do resto das letras em uma palavra. Por exemplo, se você capitalizeuma palavra que já está em letras maiúsculas, as outras letras da palavra não mudarão para minúsculas. Isso é bom quando seu texto inclui um acrônimo ou abreviação que não deve incluir letras minúsculas.
O CSS não pode definir “letras maiúsculas e minúsculas”, o estilo de capitalização usado em títulos de livros, filmes, músicas e poemas, onde os artigos estão em minúsculas (como em “Raiders of the Lost Ark”). Mas, existem soluções JavaScript para maiúsculas e minúsculas, incluindo toTitleCase () de David Gouch.
Mais Informações
- transformação de texto em MDN
- transformação de texto nas especificações W3C
- Notas sobre a acessibilidade de texto em maiúsculas do WebAIM
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum |
O Firefox oferece suporte a regras de capitalização específicas do idioma para idiomas turcos, alemão, holandês e grego, que não são compatíveis com outros navegadores. O Firefox também é o único navegador compatível text-transform: full-width;, o que pode ajudar a melhorar a legibilidade do texto que inclui uma mistura de scripts latinos e asiáticos. Veja detalhes em MDN.