J’étais incroyablement heureux quand CSS text-overflow: ellipsis (marié avec width et overflow: hidden fixe était introduit à la spécification CSS et aux navigateurs; la fonctionnalité nous a permis d’arrêter d’essayer de marier le calcul de la largeur JavaScript avec le calcul de la largeur de la chaîne et la troncature. Les points de suspension CSS étaient également très faciles d’accès.Le CSS text-overflow: ellipsis fonctionnalité est excellente mais est essentiellement destinée à ellipser les chaînes uniquement à la fin; et si nous voulons ellipser le début d’un écran? Le cas d’utilisation est assez raisonnable: pensez à afficher un chemin de fichier – plusieurs fois le répertoire pour un ensemble de fichiers est la même chose, auquel cas vous voulez afficher la fin de la chaîne, pas le début. Laissez-moi vous montrer une astuce pour les ellipses au début de la chaîne!

Le CSS

Afficher une ellipse à l’avant d’une chaîne est mos tly la même chose que les points de suspension à la fin, avec une seule astuce simple: pour ajouter des points de suspension au début d’une chaîne, utilisez RTL et et text-align pour couper le début de la chaîne! La lecture RTL à partir de text-align est un moyen génial d’obtenir l’effet souhaité des points de suspension CSS au début d’un élément ou d’une chaîne. Ce serait bien que la spécification CSS implémente un système d’ellipse plus robuste mais, pour l’instant, j’adore des astuces CSS incroyables comme celle-ci!