Justificar texto - CSS-Tricks

Anonim

A text-justifypropriedade em CSS é um complemento da text-alignpropriedade que é usada para definir o método de justificação do texto quando text-aligné definido com o justifyvalor.

p ( text-align: justify; text-justify: inter-word; )

Valores

  • inter-word: Especifica que o texto é justificado ajustando o espaçamento entre as palavras, criando efetivamente espaçamento adicional entre palavras. Esta é efetivamente uma variação da word-spacingpropriedade.
  • inter-character: Especifica que o texto é justificado ajustando o espaçamento entre os caracteres, criando efetivamente um espaçamento adicional entre os caracteres. Esta é efetivamente uma variação da letter-spacingpropriedade.
  • auto: Permite ao navegador determinar se a justificação é melhor tratada como inter-wordou inter-character. Isso pode ser útil em cenários multilíngues onde o idioma do conteúdo é desconhecido até ser processado, permitindo que o agente do usuário do navegador escolha de acordo com base no método que melhor se encaixa no contexto do idioma.
  • none: Desativa os métodos de justificação, removendo efetivamente quaisquer oportunidades de justificação ou substituindo onde um método de justificação pode ocorrer na cascata.

O que exatamente é justificação?

Texto justificado é uma maneira sofisticada de dizer como o texto preenche a caixa que o contém. Na verdade, você pode já estar bem familiarizado com justificar textos e nem mesmo saber. Se você já usou um software de edição de texto como Word e Google Docs, talvez esteja familiarizado com estes ícones:

Opções de alinhamento e justificação de texto na barra de ferramentas do Google Docs

Esses três primeiros definem o alinhamento do texto, assim como a text-alignpropriedade CSS , onde o texto pode ser alinhado à esquerda, à direita ou totalmente centralizado.

Esse quarto ícone é a opção de justificar e diz ao conteúdo para preencher toda a largura do documento, de forma que cada linha fique alinhada até a borda, independentemente de afetar o espaçamento entre as palavras.

Justificar o conteúdo no Google Docs adiciona espaçamento entre palavras para ocupar toda a largura do documento em cada linha

A text-justifypropriedade nos permite fazer o mesmo, mas com flexibilidade adicional para determinar se o método de espaçamento usado para justificar o conteúdo é gerenciado entre palavras ou caracteres.

Suporte para navegador

A text-justifypropriedade está incluída na especificação do Módulo de Texto CSS Nível 3, que está atualmente no status Rascunho do Editor no momento da redação deste artigo.

Esta propriedade está atualmente listada como “em risco” de ser descartada no período de recomendação do candidato. Como tal, não é recomendado usar esta propriedade na produção, pois é improvável que seja adotada como um padrão em todos os navegadores em um futuro próximo.

O suporte atual é limitado ao Firefox 55+. O Internet Explorer 11 e o Edge 14+ também suportam a propriedade, mas apenas o inter-wordvalor, bem como os valores não oficiais não incluídos na especificação W3C.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
Não 55 11 18 Não

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
Não 85 Não Não