Safari et text-overflow

Je découvre que Safari a un comportement qu’il est le seul à proposer.

Quand on tronque un contenu avec un overflow: hidden, on peut définir la manière dont les textes se comporteront avec text-overflow. Généralement ce sont des points de suspension qui sont choisis. Notez que le résultat est uniquement visuel : cela n’affecte pas les lecteurs d’écrans par exemple.

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Safari propose de pouvoir accéder à l’intégralité du contenu via une infobulle, qu’il génère automatiquement en fonction de si le contenu déborde ou non. Plutôt malin, même si ça ne fonctionne que sur ce navigateur à ma connaissance et qu’en version desktop.

Si on ne souhaite pas de cet ajout (car on implémente son propre système d’infobulles par exemple) il va falloir ruser. Ajouter un attribut title vide ne fonctionne pas.

Seules solutions trouvées relativement indolores :

• ajouter une div vide à côté du texte potentiellement tronqué ;
• ou générer un pseudo élément vide avec un display: block (si on souhaite contrôler ça via CSS).

Le CodePen dédié au sujet est ici.