Comment implémenter des points de suspension de texte multilignes avec CSS ?

Implémentation de points de suspension de texte sur plusieurs lignes

Bien que CSS seul puisse permettre la troncature de texte avec des points de suspension pour un débordement d'une seule ligne, obtenant le même effet sur plusieurs lignes peuvent poser un défi. La question "Text overflow ellipsis on two lines [duplicata]" explore ce problème.

À première vue, la combinaison de propriétés CSS comme text-overflow: ellipsis et white-space: nowrap semble suffisante pour le texte troncature. Cependant, white-space: nowrap empêche le retour à la ligne du texte, ce qui entraîne un texte tronqué sur une seule ligne malgré un espace suffisant pour d'autres lignes.

Pour surmonter cette limitation, considérez les propriétés CSS suivantes :

• display : -webkit-box : Initialise un modèle de disposition de boîte flexible, autorisant plusieurs lignes de text.
• -webkit-line-clamp: 3: Définit le nombre maximum de lignes que le texte doit occuper (dans ce cas, 3).
• -webkit-box-orient: vertical : Oriente la disposition de la boîte verticalement, permettant l'utilisation de plusieurs lignes text.
• overflow: Hidden: Masque tout texte dépassant les lignes spécifiées.
• text-overflow: ellipsis: Ajoute des points de suspension au texte tronqué.

En utilisant ces propriétés, vous pouvez obtenir des points de suspension de texte multilignes comme suit :

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

Cette solution CSS permet effectivement au texte de déborder sur plusieurs lignes et d'être tronqué avec des points de suspension lorsque la limite de lignes spécifiée est atteinte.

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!