Propriedade CSS text-justify
Use a propriedade CSS text-justify para definir o comportamento do espaçamento entre palavras ou caracteres. Veja valores e exemplos.
A propriedade CSS text-justify controla como o navegador distribui o espaço extra quando um texto justificado é esticado para preencher cada linha. Ela só tem efeito quando text-align está definido como justify — sozinha, não faz nada.
Esta página explica o que o text-justify faz, cada um dos seus valores, quando usá-lo, os problemas de suporte a navegadores que você precisa conhecer e como ele se relaciona com outras propriedades de espaçamento.
Que problema ele resolve
Quando você define text-align: justify, o navegador adiciona espaço em cada linha para que as bordas esquerda e direita fiquem alinhadas, como em uma coluna de jornal. Há duas formas de adicionar esse espaçamento: ampliar os espaços entre palavras ou ampliar os espaços entre caracteres. O text-justify permite escolher qual estratégia o navegador usará, em vez de deixar isso a cargo do algoritmo padrão.
Isso é importante porque a estratégia correta depende do idioma. Idiomas com espaços entre palavras (inglês, alemão, francês) geralmente ficam melhores com espaçamento extra entre palavras. Idiomas escritos sem espaços entre palavras (como chinês, japonês e coreano) só têm espaço para esticar entre caracteres, por isso inter-character é a opção natural nesses casos.
O text-justify é uma das propriedades CSS3.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Elementos de bloco. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.textJustify = "inter-character"; |
Sintaxe
text-justify: auto | inter-word | inter-character | none | initial | inherit;Como o text-justify é inerte sem texto justificado, você quase sempre define os dois juntos:
p {
text-align: justify; /* turn justification on */
text-justify: inter-word; /* choose how the gaps grow */
}Exemplo da propriedade text-justify:
Exemplo de código CSS text-justify
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Resultado
Com inter-word, os espaços entre palavras crescem até que cada linha alcance a borda do contêiner. Reduza o tamanho do navegador e você verá os espaços se esticarem mais nas linhas que estão longe de preencher a largura.
Exemplo da propriedade text-justify com o valor "inter-character":
Exemplo de CSS text-justify com o valor inter-character
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
text-align: justify;
text-justify: inter-character;
}
</style>
</head>
<body>
<h2>Text-justify property example</h2>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Com inter-character, o espaço extra é inserido entre caracteres individuais, e não apenas entre palavras. Em textos em latim o efeito é sutil; ele se torna essencial para scripts CJK, onde não há espaços entre palavras para ampliar.
Suporte a navegadores e problemas conhecidos
O text-justify tem suporte irregular e algumas arestas que vale conhecer antes de depender dele:
inter-characteré o valor extra mais confiável, mas a palavra-chavedistribute, que era comum antes, foi renomeada parainter-charactere o nome antigo está obsoleto.nonenão é respeitado em todos os lugares. Alguns mecanismos ainda justificam a última linha ou recorrem ao algoritmo padrão, portanto teste em vez de presumir que a justificação está completamente desativada.- O texto justificado pode criar "rios" — canais irregulares de espaço em branco percorrendo um parágrafo — especialmente em colunas estreitas. Combinar justificação com
hyphens: autoe uma medida sensata de comprimento de linha os reduz. - A última linha de um bloco justificado nunca é esticada; ela permanece alinhada à esquerda (ou segue
text-align-last).
Em caso de dúvida, defina text-justify: auto (ou deixe sem definir) e deixe o navegador escolher a melhor estratégia para o idioma do conteúdo.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
auto | O algoritmo de justificação é definido. O navegador pode determinar se inter-word ou inter-character é melhor para a justificação. Este é o valor padrão da propriedade. | Experimente » |
inter-word | O navegador aumenta o espaço entre palavras. Isso é típico para idiomas com limites claros entre palavras. | Experimente » |
inter-character | O navegador aumenta o espaço entre caracteres durante a justificação. | Experimente » |
none | A justificação é desativada. | Experimente » |
initial | Define a propriedade com seu valor padrão. | Experimente » |
inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
text-align— a propriedade que deve serjustifypara que otext-justifytenha algum efeito.text-align-last— controla o alinhamento da última linha de um bloco justificado.word-spacing— define diretamente o espaço entre palavras, independentemente da justificação.letter-spacing— define diretamente o espaço entre caracteres (tracking).