A propriedade text-overflow em CSS lida com situações em que o texto é recortado quando transborda a caixa do elemento. Ele pode ser recortado (ou seja, cortado, oculto), exibir reticências (…, Valor de intervalo Unicode U + 2026) ou exibir uma string definida pelo autor (sem suporte do navegador atual para strings definidas pelo autor).
Observe que text-overflow ocorre apenas quando a propriedade overflow do contêiner tem o valor hidden, scroll ou auto e white-space: nowrap;.
O estouro de texto só pode acontecer em elementos de nível de bloco ou bloco embutido, porque o elemento precisa ter uma largura para ser estourado. O estouro ocorre na direção conforme determinado pela propriedade direction ou atributos relacionados.
A demonstração a seguir exibe o comportamento da propriedade text-overflow incluindo todos os valores possíveis. O suporte do navegador varia!
Configuração overflow para scroll ou auto exibirá barras de rolagem para revelar o texto adicional, enquanto hidden não. O texto oculto pode ser selecionado selecionando as reticências.
Coisas antigas
Uma versão antiga da especificação diz que você poderia usar um URL para uma imagem para as reticências, mas parece que se isso foi descartado.
Há uma sintaxe de dois valores, por exemplo text-overflow: ellipsis ellipsis;, que controlaria o estouro nos lados esquerdo e direito do mesmo contêiner. Não tenho certeza de como isso seria possível alcançar. Talvez o texto centralizado em um contêiner muito pequeno? A nova especificação diz que isso, além de definir uma string, está “em risco”.
Não tenho certeza de onde ellipsis-word veio. Não está em a especificação ou em qualquer outra documentação que não seja WebPlatform.org.
A propriedade text-overflow costumava ser uma abreviação para a combinação de text-overflow-mode e text-overflow-ellipsis, mas não mais e essas propriedades separadas não existem.
Propriedades relacionadas
-
white-space -
overflow -
word-break -
width