Alinhamento, Decoração e Espaçamento de Texto
Alinhe o texto, adicione sublinhados ou tachados e controle o espaçamento entre letras e linhas.
Alinhamento, Decoração e Espaçamento de Texto é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Alinhamento do texto
text-align controla o alinhamento horizontal do conteúdo em linha dentro de um contêiner de bloco.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
Alinhamento do texto: justificado
justify estende as linhas para preencher toda a largura do contêiner, adicionando espaço entre as palavras. Use-o com hyphens: auto para evitar espaços desproporcionais em contêineres estreitos.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
Decoração do texto
text-decoration adiciona linhas ao texto. É usado com frequência para sublinhar links ou riscar conteúdo excluído.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
Decoração do texto: propriedades individuais
text-decoration é um atalho para linha, estilo, cor e espessura:
<a href="#">Wavy red underline link</a>
Transformação do texto
text-transform altera o uso de maiúsculas e minúsculas do texto sem modificar o HTML subjacente:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
Recuo do texto
text-indent aplica recuo à primeira linha de um elemento de bloco. Use um valor negativo com um preenchimento interno correspondente para ocultar texto de forma acessível (substituição de imagem).
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
Espaços em branco
white-space controla como os espaços em branco e as quebras de linha no HTML de origem são tratados:
normal— compacta os espaços em branco e quebra as linhas nos limites das palavrasnowrap— impede a quebra de linhapre— preserva os espaços em branco e não permite quebras de linhapre-wrap— preserva os espaços em branco e permite quebras de linha
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
Espaçamento entre letras
letter-spacing define um espaço adicional entre os caracteres. Valores positivos afastam os glifos; valores negativos aproximam-nos. Use em para um dimensionamento proporcional.
<p class="spaced">spaced heading text</p>
Espaçamento entre palavras
word-spacing adiciona espaço extra entre as palavras. Raramente é necessário, mas pode ser útil para ajustar textos justificados ou títulos de destaque.
<h1>Word Spaced Heading Example</h1>
Reticências para texto excedente
Trunque o texto excedente usando reticências. Isso requer overflow: hidden e white-space: nowrap.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
Texto vertical com modo de escrita
writing-mode gira a direção do fluxo do texto. Combinado com text-orientation, ele permite criar tipografia vertical em CJK ou rótulos girados criativos.
<div class="label">Vertical Label Text</div>
Verificação rápida
Quais são as três propriedades necessárias para mostrar reticências quando o texto excede o espaço disponível?
Recapitulação
text-align posiciona o conteúdo em linha dentro do contêiner. text-decoration adiciona ou remove linhas. text-transform altera o uso de maiúsculas e minúsculas. white-space: nowrap + overflow: hidden + text-overflow: ellipsis formam a receita clássica para truncamento.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Alinhamento, Decoração e Espaçamento de Texto” é grátis?
Sim — o texto completo de “Alinhamento, Decoração e Espaçamento de Texto” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Alinhamento, Decoração e Espaçamento de Texto”?
Alinhe o texto, adicione sublinhados ou tachados e controle o espaçamento entre letras e linhas. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Alinhamento, Decoração e Espaçamento de Texto”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Famílias de Fontes e Fontes Seguras para a Web
- Tamanho, Peso e Estilo da Fonte
- Alinhamento, Decoração e Espaçamento de Texto
- Google Fonts e @font-face