Texto-alinhar-último - CSS-Tricks

Anonim

text-align-lastpermite controlar o alinhamento da última (ou única) linha de texto imediatamente antes de uma quebra de linha forçada - por exemplo, o final de um parágrafo ou a linha antes de uma
marca.

.intro-graph ( text-align-last: center; )

No momento em que este artigo foi escrito, apenas os navegadores Mozilla e o Internet Explorer são compatíveis text-align-last(com prefixos do fornecedor), e cada um tem uma implementação ligeiramente diferente. A propriedade deveria começar a funcionar no Chrome 35, mas a partir do Chrome 40 ainda requer o sinalizador de plataformas web experimental. Mais detalhes sobre as implementações do navegador nos Pontos de interesse.

Valores

  • left alinha a última linha do texto à esquerda do contêiner.
  • rightalinha a última linha do texto à direita do contêiner.
  • center centraliza a última linha de texto dentro do contêiner.
  • justify justifica a última linha do texto para que ocupe toda a largura do contêiner, inserindo espaço entre as palavras, se necessário, para aumentar o comprimento da linha.
  • startalinha o texto com o “início” da linha com base no directiondo texto - esquerda para idiomas LTR, direita para idiomas RTL.
  • endalinha a última linha com o “fim” da linha com base no directiondo texto - direita para idiomas LTR, esquerda para idiomas RTL.
  • autoo padrão. Alinha a última linha do texto para corresponder à text-alignpropriedade do elemento , se estiver definida. Se não estiver definido, autoalinha o texto no início.
  • inheritaplica a text-align-lastpropriedade do elemento pai.

Demo

Esta demonstração mostra os diferentes text-align-lastvalores em ação. Observação: o Internet Explorer não oferece suporte aos valores startou end.

Veja o Pen text-align-last de CSS-Tricks (@ css-tricks) no CodePen.

Pontos de interesse

No Internet Explorer, text-align-lastsó funciona quando o text-alignrestante do texto no elemento selecionado está definido como justify. Além disso, o IE não reconhece o valor startou end.

Em navegadores Mozilla, text-align-lastfuncionará na última linha antes de uma quebra de linha forçada, mesmo se não houver alinhamento especificado para o resto do texto no elemento.

Também vale a pena saber que text-align-lastdefine o alinhamento de todas as últimas linhas dentro do elemento selecionado, não apenas a última linha absoluta do texto. Portanto, por exemplo, se você tiver um divcom cinco parágrafos, sua text-align-lastdeclaração se aplicará à última linha de cada um dos parágrafos.

Se você quiser usar text-align-lastapenas na última linha do contêiner, poderá usar :last-childou :last-of-type. Seu CSS seria mais ou menos assim:

#center-only-last p:last-child ( -ms-text-align-last: center; -moz-text-align-last: center; text-align-last: center; )

Na demonstração abaixo, o lado esquerdo mostra text-align-last: center;aplicado a um div com vários parágrafos dentro dele. Observe que a última linha de cada parágrafo está centralizada. O lado direito mostra text-align-last: center;aplicado apenas ao último parágrafo dentro da div usando :last-child.

Veja o Pen text-align-last de CSS-Tricks (@ css-tricks) no CodePen.

Relacionado

  • alinhamento de texto
  • text-indent

Mais Informações

  • text-align-last no Módulo de Texto CSS Nível 3 (W3C)
  • texto-alinhar-último em MDN
  • text-align-last no MSDN
  • texto alinhado por último no blog da equipe da plataforma web da Adobe
  • Webkit Bug 76173, a respeito da implementação do Chrome de text-align-last

Suporte para navegador

cromada Safári Raposa de fogo Ópera IE Android iOS
Mais de 35 com sinalizadores experimentais não 34+ (prefixado) não 5.5+ (prefixado) não não