Ellipses de texte multiligne : est-ce possible avec du CSS pur ?

Texte des points de suspension sur plusieurs lignes : est-ce possible ?

La possibilité de tronquer un texte débordant avec des points de suspension (...) est un exigence CSS commune. Cependant, la propriété standard text-overflow ne fonctionne que sur une seule ligne. Cela soulève la question : pouvons-nous reproduire ce comportement sur plusieurs lignes, permettant au texte de s'enrouler selon les besoins ?

La réponse est un oui catégorique. Grâce aux propriétés CSS conçues spécifiquement à cet effet, il est possible d'obtenir l'effet souhaité sans recourir à JavaScript. Par exemple :

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

Ce code créera un div qui affichera le texte sur trois lignes maximum, le texte restant étant remplacé par des points de suspension. En ajustant la propriété -webkit-line-clamp, vous pouvez contrôler le nombre maximum de lignes affichées.

Gardez à l'esprit que cette technique ne fonctionne actuellement que dans les navigateurs basés sur WebKit comme Safari et Chrome. Si vous avez besoin d'une compatibilité entre navigateurs, vous pouvez envisager d'utiliser un polyfill ou une solution JavaScript plus complexe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!