Comment créer un débordement de texte multiligne avec Ellipsis en CSS ?

Débordement de texte multiligne avec points de suspension en CSS

Réaliser un débordement de texte avec des points de suspension mais autoriser plusieurs lignes peut être difficile. Cependant, les propriétés CSS peuvent y parvenir efficacement.

Pour créer un effet de points de suspension sur trois lignes, utilisez le code suivant :

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

Ce code utilise "-webkit-box" et " -webkit-line-clamp" pour forcer le texte dans une boîte de trois lignes. La propriété "-webkit-box-orient" définit l'orientation sur verticale, tandis que "overflow: Hidden" et "text-overflow: ellipsis" créent l'effet de points de suspension.

Si vous rencontrez des problèmes de compatibilité avec le navigateur, essayez l'option option de secours suivante :

display: flex;
flex-wrap: wrap;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;

Ces propriétés forcent également le texte sur plusieurs lignes et permettent le débordement des points de suspension.

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!