Fiquei extremamente feliz quando CSS text-overflow: ellipsis (casado com width e overflow: hidden fixos foi apresentado às especificações CSS e navegadores; o recurso nos permitiu parar de tentar casar o cálculo da largura do JavaScript com o cálculo da largura da string e truncamento. As reticências CSS também eram muito fáceis de acessar. O CSS text-overflow: ellipsis recurso é excelente, mas destina-se essencialmente a elipsar strings apenas no final; e se quisermos reticular o início de uma tela? O caso de uso é bastante razoável: pense em exibir um caminho de arquivo – muitas vezes o diretório de um conjunto de arquivos é o mesmo, caso em que você “d deseja exibir o final da string, não o início. Deixe-me mostrar um truque para reticências no início da string!

O CSS

Mostrando reticências na frente de uma corda está mos exatamente o mesmo que reticências no final, apenas com um truque simples: para adicionar reticências no início de uma string, use RTL e text-align para cortar o início da string! Reproduzir RTL de text-align é uma maneira genial de obter o efeito desejado de reticências CSS no início de um elemento ou string. Seria ótimo para a especificação CSS implementar um sistema de elipse mais robusto, mas, por enquanto, adoro truques CSS incríveis como este!