Comment tronquer le texte sur la deuxième ligne avec CSS ?

Troncation CSS sur la deuxième ligne : une solution détaillée

Réaliser la troncature du texte sur la deuxième ligne à l'aide de CSS peut être un défi qui manque de clarté documentation en ligne. Cet article propose une solution étape par étape pour vous aider à surmonter cet obstacle.

L'objectif est d'afficher des points de suspension (...) à la fin de la deuxième ligne d'un texte, au lieu de la totalité texte débordant sur une troisième ligne.

Pour obtenir cet effet, nous utilisons des propriétés CSS spécifiques :

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

Ces propriétés fonctionnent conjointement comme suit :

• overflow : caché conserve le texte dans la zone définie.
• text-overflow : les points de suspension ajoutent les points de suspension si le texte dépasse l'espace disponible.
• display : -webkit-box et -webkit-line-clamp : 3 garantissent que le texte s'étend sur plusieurs lignes mais est limité à trois lignes.
• -webkit-box-orient : vertical oriente les lignes verticalement.

Notez que cette solution n'est entièrement prise en charge que dans les navigateurs WebKit, tels que Chrome et Safari. D'autres navigateurs peuvent nécessiter des approches différentes ou ne pas prendre en charge explicitement la troncature du texte sur la deuxième ligne.

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!