Maison > interface Web > tutoriel CSS > CSS peut-il créer des points de suspension uniquement sur la deuxième ligne de texte ?

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

DDD
Libérer: 2024-12-16 03:47:12
original
595 Les gens l'ont consulté

Can CSS Create an Ellipsis Only on the Second Line of Text?

Obtenir des points de suspension CSS sur la deuxième ligne

La question se pose : le dépassement de texte CSS : les points de suspension peuvent-ils être appliqués spécifiquement à la deuxième ligne de texte? Une recherche méticuleuse n’a abouti à aucune solution viable. Explorons une approche alternative :

Solution de navigateur WebKit :

Le code CSS suivant cible les navigateurs WebKit et produit efficacement des points de suspension sur la deuxième ligne :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Copier après la connexion

Comprendre le Code :

  • overflow : caché empêche tout débordement en dehors de la zone du conteneur.
  • text-overflow : les points de suspension déclenchent les points de suspension à la troncature.
  • affichage : -webkit-box et -webkit-box-orient : vertical activent la propriété -webkit-line-clamp pour function.
  • -webkit-line-clamp : 3 spécifie qu'un maximum de trois lignes seront affichées, limitant ainsi les points de suspension à 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal