CSS Ellipsis Beginning of String (Elipse CSS no início da cadeia de caracteres)

O CSS text-overflow: ellipsis é excelente, mas essencialmente se destina a elipses de cadeias de caracteres somente no final; e se quisermos elipses no início de uma tela? O caso de uso é bastante razoável: pense na exibição de um caminho de arquivo – muitas vezes o diretório de um conjunto de arquivos é o mesmo e, nesse caso, o senhor deseja exibir o final da cadeia de caracteres, não o início.

Vou mostrar ao senhor um truque para colocar reticências no início da cadeia de caracteres!

O CSS

A exibição de reticências na frente de uma cadeia de caracteres é basicamente a mesma coisa que reticências no final, mas com um truque simples:

.ellipsize-left {
    /* Standard CSS ellipsis */
    white-space: nowrap;                   
    overflow: hidden;
    text-overflow: ellipsis;  
    width: 200px;
    
    /* Beginning of string */
    direction: rtl;
    text-align: left;
}

Para adicionar reticências no início de uma cadeia de caracteres, use RTL e e text-align para cortar o início da cadeia de caracteres!

Reproduzir RTL a partir de text-align é uma maneira genial de obter o efeito desejado de reticências do CSS no início de um elemento ou cadeia de caracteres. Seria ótimo se a especificação CSS implementasse um sistema de reticências mais robusto, mas, por enquanto, adoro truques incríveis de CSS como esse!