Propriedade text-transform
Última atualização: 2026-09-13
text-transform Propriedade text-transform
A propriedade text-transform do CSS altera como o texto é exibido em termos de maiúsculas e minúsculas — uppercase, lowercase ou capitalized — sem modificar o conteúdo subjacente. O texto original no HTML permanece intacto, então leitores de tela e textos copiados não são afetados; a conversão é puramente visual.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
text-transform: none | capitalize | uppercase | lowercase | full-width;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | capitalize | uppercase | lowercase | full-width | Palavra-chave | Valores de transformação de caixa do texto |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-transform | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： capitalize coloca em maiúscula a primeira letra de cada palavra, mas não tem efeito em sistemas de escrita como o chinês ou japonês que não têm distinção de caixa.
Aviso： uppercase aplica regras especiais de caixa em alguns idiomas (grego, turco), então o resultado pode diferir do esperado.
❓ Perguntas Frequentes
QO text-transform altera o conteúdo real do texto no DOM?
ANão. Afeta apenas a renderização visual; o texto no DOM e na fonte permanece inalterado, e os usuários geralmente copiam o texto original. É ótimo para títulos em maiúsculas consistentes e formatação de rótulos de botões.
QPara que serve o valor full-width da propriedade text-transform?
AEla converte caracteres de meia largura (letras latinas, dígitos, pontuação) em suas formas de largura inteira, para que os caracteres ocidentais se alinhem uniformemente em parágrafos chineses. É comumente usada em tipografia japonesa e chinesa e não afeta caracteres que já são de largura inteira, como os hanzi.
QPor que o valor capitalize não tem efeito no texto chinês?
Acapitalize apenas coloca em maiúscula a primeira letra de cada palavra, e o chinês não tem nem palavras nem conceito de caixa, então nada muda; em texto misto, apenas a parte em inglês é afetada. Além disso, idiomas como grego e turco têm regras especiais de caixa, então os resultados podem diferir do esperado.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
