Comment puis-je tronquer le texte de la deuxième ligne à l'aide de CSS ?

Tronquer le texte sur des lignes spécifiques en CSS : résoudre l'énigme des points de suspension

Question originale :

"Comment puis-je réaliser des points de suspension de texte spécifiquement sur la deuxième ligne en utilisant CSS ? Malgré une recherche sur Internet, j'ai trouvé les mains vides."

Réponse :

Bien que CSS ne fournisse pas de moyen direct de tronquer le texte sur une ligne spécifique, vous pouvez obtenir cet effet dans les navigateurs Webkit avec le CSS suivant propriétés :

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

Explication :

• overflow : caché : Cette propriété empêche le contenu de déborder au-delà des limites du conteneur.
• text-overflow : points de suspension : cette propriété demande au navigateur d'utiliser les points de suspension (...) lorsque le texte dépasse la limite disponible space.
• display : -webkit-box : Cette propriété définit le conteneur comme étant un modèle de boîte webkit, ce qui permet des options de style supplémentaires.
• -webkit-line-clamp : 3 : Ceci La propriété limite le conteneur à trois lignes de texte.
• -webkit-box-orient: vertical : Cette propriété définit l'orientation du modèle de boîte à la verticale, permettant au texte d'être renvoyé à plusieurs lignes. lignes.

Prise en charge des navigateurs :

Notez que cette solution n'est prise en charge que dans les navigateurs Webkit, notamment Safari, Chrome et Microsoft Edge.

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!