Forcer le texte sur une seule ligne en ellipse
- nowrap
- ellipse
Technique de CSS défensif en responsive ou simplement pour le plaisir de créer des ellipses.
.ellipse {
text-overflow: ellipsis;
white-space: nowrap;
overflow: clip;
display: inline-block;
}Accessibilité
Bonne pratique : Je conseille d'identifier l'élément grâce à l'attribut title pour que le texte complet soit toujours accessible au survol. Une tooltip peut aussi faire l'affaire.
<p class="ellipse" title="Lorem ipsum très très long">Lorem ipsum (pas) très très long</p>