Me sentí increíblemente feliz cuando CSS text-overflow: ellipsis (casado con width fijo y overflow: hidden introdujo la especificación CSS y los navegadores; la función nos permitió dejar de intentar combinar el cálculo del ancho de JavaScript con el cálculo del ancho de la cadena y el truncamiento. La elipsis de CSS también fue muy amigable con la accesibilidad. El CSS text-overflow: ellipsis La característica es excelente, pero está esencialmente destinada a elipsar las cadenas solo al final; ¿y si queremos elipsar el comienzo de una pantalla? El caso de uso es bastante razonable: piense en mostrar una ruta de archivo, muchas veces el directorio de un conjunto de archivos. es el mismo, en cuyo caso querría mostrar el final de la cadena, no el principio. ¡Permítame mostrarle un truco para los puntos suspensivos al principio de la cadena!

El CSS

Mostrando puntos suspensivos en la parte delantera de una cuerda es mos Al igual que los puntos suspensivos al final, solo con un truco simple: para agregar puntos suspensivos al principio de una cadena, use RTL y text-align para recortar el comienzo de la cadena. Reproducir RTL fuera de text-align es una forma genial de obtener el efecto deseado de puntos suspensivos CSS al comienzo de un elemento o cadena. Sería genial que la especificación CSS implemente un sistema de puntos suspensivos más robusto, pero, por ahora, ¡adoro trucos CSS increíbles como este!