Comment puis-je créer des points de suspension de débordement de texte multilignes avec CSS ?

Ellipses de débordement de texte sur plusieurs lignes

Alors que les règles CSS peuvent efficacement tronquer le texte avec des points de suspension lorsqu'il dépasse les limites spécifiées, obtenant le même effet sur plusieurs lignes peuvent être difficiles. Cependant, l'utilisation d'une combinaison de propriétés CSS rend cela possible.

Pour obtenir des points de suspension sur plusieurs lignes, l'approche suivante peut être utilisée :

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

Voici comment fonctionnent ces propriétés :

• display : -webkit-box : Définit l'élément comme une boîte flexible model.
• -webkit-line-clamp : 3 : Spécifie le nombre maximum de lignes que le texte doit occuper avant d'être tronqué. Dans ce cas, il est défini sur 3 lignes.
• -webkit-box-orient: vertical : oriente la boîte verticalement, permettant au texte de s'enrouler sur plusieurs lignes.
• overflow : caché : garantit que tout contenu excédentaire en dehors des lignes spécifiées n'est pas affiché.
• text-overflow: ellipsis : Déclenche les points de suspension lorsque le texte déborde de la zone désignée. lignes.

Grâce à ces propriétés, le texte peut être élégamment tronqué sur plusieurs lignes, offrant un affichage clair et concis.

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!