Estouro de texto - CSS-Tricks

A text-overflowpropriedade em CSS lida com situações em que o texto é cortado quando transborda da caixa do elemento. Ele pode ser cortado (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).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Note-se que text-overflowsó ocorre quando o contêiner overflowpropriedade tem o valor hidden, scrollou autoe 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 text-overflowpropriedade incluindo todos os valores possíveis. O suporte do navegador varia!

Confira esta Caneta!

Definir overflowcomo scrollou autoexibirá barras de rolagem para revelar o texto adicional, enquanto hiddennão. O texto oculto pode ser selecionado selecionando as elipses.

Coisas antigas

Uma versão antiga da especificação diz que você poderia usar um URL para uma imagem nas reticências, mas parece que isso foi descartado.

Existe 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-wordveio. Não está nas especificações ou em qualquer outra documentação que não seja WebPlatform.org.

A text-overflowpropriedade costumava ser uma abreviatura para a combinação de text-overflow-modee text-overflow-ellipsis, mas não é mais e essas propriedades separadas não existem.