CSS peut-il créer des points de suspension sur la deuxième ligne de texte ?

Points de suspension CSS sur la deuxième ligne : est-ce réalisable ?

En CSS, le débordement de texte : les points de suspension sont largement utilisés pour indiquer un texte tronqué avec une ellipse (...). Cependant, implémenter des points de suspension sur la deuxième ligne d'un bloc de texte multiligne a longtemps été un défi.

Pour obtenir cet effet, plutôt que de compter sur le débordement de texte, on peut envisager d'utiliser -webkit-line- propriété de serrage. Cette propriété limite le nombre de lignes affichées dans un conteneur de blocs. En le combinant avec display: -webkit-box et -webkit-box-orient: vertical, vous pouvez contraindre le texte à un nombre spécifique de lignes. Pour garantir l'écrêtage, overflow: Hidden est recommandé.

L'extrait de code suivant illustre cette approche :

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

Cette technique utilise les préfixes -webkit, ce qui la rend compatible avec les navigateurs webkit. Cependant, il convient de noter que la prise en charge de cette combinaison spécifique peut varier selon les différentes versions du navigateur.

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!