Justificar texto em CSS é fácil de aplicar, mas difícil de fazer ficar bom. A propriedade certa é text-align: justify, e a regra que faz o trabalho cabe em uma linha:
p {
text-align: justify;
}
Isso aplica a justificação em qualquer parágrafo da página. O texto se ajusta nas duas margens, ficando alinhado à esquerda e à direita ao mesmo tempo. O problema é que o navegador faz isso aumentando o espaço entre as palavras, e em linhas curtas ou em telas pequenas esses espaços viram problema: aparecem “rios de espaço” no meio do texto, palavras se espalham desigualmente e a leitura piora.
Este artigo cobre o caminho completo: como aplicar, como ajustar para não ficar feio, e como fazer no HTML puro, no WordPress e no Bootstrap.
A propriedade text-align e seus valores
A text-align controla o alinhamento horizontal do texto dentro de um elemento de bloco. Os valores aceitos são:
| Valor | Comportamento |
|---|---|
left | Alinhamento à esquerda (padrão na maioria dos idiomas) |
right | Alinhamento à direita |
center | Texto centralizado |
justify | Distribuição uniforme entre as bordas esquerda e direita |
justify-all | Justifica inclusive a última linha (raro, suporte limitado) |
start | Alinha ao início (esquerda em LTR, direita em RTL) |
end | Alinha ao final (direita em LTR, esquerda em RTL) |
Para o objetivo específico de justificar texto, o valor é justify. Os demais servem para outros tipos de alinhamento.
A documentação MDN sobre text-align traz a referência completa de cada valor com exemplos visuais.
Como justificar texto em HTML puro
Existem três formas de aplicar o CSS no HTML. Cada uma serve para um contexto:
Forma 1: CSS inline (rápido, mas evite)
<p style="text-align: justify;">
Este parágrafo está justificado usando estilo inline.
</p>
Funciona, mas mistura HTML com CSS e dificulta manutenção. Use só em casos muito específicos como teste rápido ou e-mail HTML.
Forma 2: CSS interno no <head>
<style>
p {
text-align: justify;
}
</style>
Coloca todas as regras dentro da tag <style> no <head> da página. Vale para sites pequenos com poucas páginas.
Forma 3: CSS externo (recomendado)
Crie um arquivo styles.css e link na página:
<link rel="stylesheet" href="styles.css">
Dentro de styles.css:
.texto-justificado {
text-align: justify;
}
E aplique a classe no HTML:
<p class="texto-justificado">
Este parágrafo terá o texto justificado.
</p>
Essa é a forma profissional e o padrão em qualquer projeto sério. Permite reutilizar a classe em vários parágrafos sem repetir CSS.
A tag <center> e o atributo align="justify" do HTML antigo foram descontinuados pela especificação HTML5. Eles ainda funcionam por compatibilidade, mas qualquer projeto novo deve usar CSS.
Como justificar texto no WordPress
No WordPress, o caminho depende do editor:
Editor Gutenberg (blocos): clique no parágrafo, abra o painel lateral direito de configurações do bloco, role até a seção de tipografia ou usa o ícone de alinhamento no menu superior do bloco. A opção de justificar pode aparecer ou não, dependendo da versão do WordPress e do tema. Em versões mais novas, há um ícone específico de “justificar” ao lado dos ícones de alinhamento esquerda/direita/centro.
Editor clássico: botão de alinhamento na barra de ferramentas, com 4 opções (esquerda, centro, direita, justificar).
Via CSS personalizado: Aparência → Personalizar → CSS Adicional → cole:
.entry-content p {
text-align: justify;
}
Isso justifica todos os parágrafos dentro do conteúdo dos posts e páginas, sem mexer em sidebar, footer ou widgets.
Para configurações mais específicas no WordPress, veja a referência detalhada em justificar texto HTML no WordPress.
Como justificar texto no Bootstrap
O Bootstrap teve a classe utilitária .text-justify até a versão 4. Foi removida no Bootstrap 5, então a forma de justificar agora é via CSS personalizado:
.text-justify {
text-align: justify !important;
}
Ou diretamente nos elementos sem classe utilitária:
<p style="text-align: justify;">
Texto justificado no Bootstrap 5.
</p>
O motivo da remoção foi a baixa frequência de uso e os problemas de legibilidade reconhecidos pela equipe do Bootstrap. Para a referência completa de justificação no Bootstrap incluindo as alternativas modernas, veja justificar texto HTML no Bootstrap.
Os “rios de espaços”: o problema real do texto justificado
O efeito mais comum quando você aplica text-align: justify é o aparecimento dos rios de espaço: espaços brancos verticais que parecem rios cortando o texto. Acontece quando o navegador precisa esticar muito as palavras para preencher a linha.
Por que aparecem:
- Linhas curtas (menos palavras para distribuir o espaço)
- Tela estreita (mobile)
- Palavras longas que não cabem na linha (e quebram)
Existem dois ajustes que ajudam a reduzir o problema:
Ajuste 1: hifenização com hyphens
p {
text-align: justify;
hyphens: auto;
}
A propriedade hyphens: auto permite que o navegador quebre palavras longas com hífens, distribuindo melhor o espaço entre as palavras. Para funcionar, o HTML precisa declarar o idioma:
<html lang="pt-BR">
Sem o lang, o navegador não sabe quais regras de hifenização aplicar.
Ajuste 2: text-justify para controle fino
p {
text-align: justify;
text-justify: inter-word;
}
A propriedade text-justify define como o espaço é distribuído na justificação:
| Valor | Efeito |
|---|---|
auto | Navegador escolhe a melhor estratégia |
inter-word | Distribui espaço entre palavras (padrão) |
inter-character | Distribui espaço entre caracteres (raro, para idiomas asiáticos) |
none | Desativa a justificação |
Para textos em português, inter-word é o valor mais natural.
Quando NÃO usar texto justificado
Aplicar text-align: justify em tudo é uma das piores decisões de design tipográfico. Existem casos onde a justificação prejudica em vez de ajudar:
Em telas estreitas (mobile): as linhas ficam tão curtas que os espaços viram absurdos. A maioria dos sites responsivos remove a justificação no mobile via media query:
@media (max-width: 768px) {
p {
text-align: left;
}
}
Em textos curtos: títulos, legendas e textos com 2 a 3 linhas raramente ficam bons justificados.
Em conteúdo acessível para dislexia: a WCAG 1.4.8 do W3C recomenda alinhamento à esquerda para usuários com dislexia ou dificuldades cognitivas. Os espaços irregulares do texto justificado dificultam o rastreamento visual de uma linha para outra.
Em fontes muito grandes: quanto maior a fonte, mais visíveis ficam os rios de espaço.
Como regra geral: use justificação só em blocos de texto longos, em tela desktop, com fonte de tamanho normal e idioma declarado para permitir hifenização.
Tabela de compatibilidade nos principais navegadores
| Navegador | text-align: justify | text-justify | hyphens com lang |
|---|---|---|---|
| Chrome | Sim | Suporte parcial | Sim |
| Firefox | Sim | Suporte parcial | Sim |
| Safari | Sim | Suporte parcial | Sim |
| Edge | Sim | Suporte parcial | Sim |
| Opera | Sim | Suporte parcial | Sim |
A propriedade text-align: justify tem suporte universal há mais de 20 anos. Já text-justify ainda tem implementações parciais e o valor inter-character só funciona bem em texto asiático.
O que esta página entrega que os concorrentes não entregam
O top 10 do Google para essa pergunta cobre o básico (text-align: justify) mas deixa lacunas práticas:
- MDN Web Docs: documentação técnica, sem foco em HTML/WordPress/Bootstrap
- W3Schools: referência seca, sem casos de uso reais
- HTML Progressivo: tutorial de 2014, sem mencionar text-justify e hyphens
- freeCodeCamp: em espanhol, conteúdo médio
- Sites em espanhol (vários): cobrem o básico
Esta página vai além ao incluir:
- Distinção das 3 formas de aplicar CSS no HTML (inline, interno, externo)
- Aplicação prática no WordPress (Gutenberg + clássico + CSS personalizado)
- Aviso sobre Bootstrap 5 ter removido
.text-justify(informação atual) - Explicação dos “rios de espaços” como problema visual real
- Ajustes com
hyphensetext-justifypara resolver os rios - Quando NÃO usar (mobile, dislexia, fontes grandes)
- Tabela de compatibilidade por navegador
Perguntas frequentes
Como justificar texto somente em CSS, sem mexer no HTML?
Crie uma regra para o seletor que cobre os parágrafos que você quer justificar. Para todos os parágrafos: p { text-align: justify; }. Para uma área específica: .conteudo p { text-align: justify; }.
Por que meu texto justificado fica com espaços enormes entre as palavras?
Porque a linha tem poucas palavras para distribuir o espaço. Use hyphens: auto com o atributo lang no HTML para permitir hifenização. Em telas estreitas, considere remover a justificação via media query.
text-align: justify funciona em div, span e parágrafos?
Funciona em qualquer elemento de bloco: div, p, section, article, li. Não funciona em elementos inline como span ou a por padrão, a menos que você mude o display deles para block.
Como justificar a última linha também?
Use text-align-last: justify. A última linha de um bloco justificado fica alinhada à esquerda por padrão, mas essa propriedade força a justificação até nela. Use com cuidado, fica esquisito em parágrafos curtos.
Bootstrap 5 ainda tem a classe text-justify?
Não. Foi removida. Para justificar no Bootstrap 5, use CSS personalizado ou aplique style="text-align: justify" diretamente. A equipe do Bootstrap removeu a classe por baixo uso e problemas de legibilidade.
Posso justificar texto em e-mail HTML?
Sim, mas use estilo inline porque muitos clientes de e-mail não suportam CSS externo ou no <head>. O código fica <p style="text-align: justify;">texto</p>. Mesmo assim, teste em vários clientes (Gmail, Outlook, Apple Mail), porque a renderização varia.
