Comment obtenir un débordement de texte multiligne avec Ellipsis en CSS ?-tutoriel CSS-php.cn

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

Patricia Arquette

Libérer： 2024-12-03 09:38:11

original

815 Les gens l'ont consulté

How to Achieve Multiline Text Overflow with Ellipsis in CSS?

Débordement de texte multiligne avec points de suspension

En CSS, la propriété text-overflow permet de tronquer le texte lorsqu'il dépasse la zone désignée. Cependant, par défaut, cette troncature s'effectue sur une seule ligne. Parfois, il est souhaitable de permettre au texte de s'enrouler sur plusieurs lignes tout en indiquant qu'il y a plus à voir.

Réaliser un débordement multiligne avec des points de suspension

Pour obtenir cet effet , nous pouvons utiliser les propriétés CSS suivantes :

affichage : -webkit-box; : Cette propriété crée un conteneur flexible pouvant accueillir plusieurs lignes.
-webkit-line-clamp : 3; : Indique le nombre maximum de lignes autorisées avant que les points de suspension n'apparaissent (par exemple, réglés sur 3 pour un débordement de trois lignes).
-webkit-box-orient : vertical; : garantit que les lignes s'empilent verticalement dans le conteneur.
overflow : caché; : masque tout texte qui dépasse les limites du conteneur.
text-overflow: ellipsis; : Ajoute les points de suspension (...) à la fin du dernier visible

Exemple d'utilisation

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Copier après la connexion

Avec ces propriétés en place, le texte dans la ligne

L'élément s'enroulera sur plusieurs lignes selon les besoins. Cependant, si le texte dépasse l'espace disponible sur la troisième ligne, il sera tronqué et des points de suspension apparaîtront à la fin.

Remarque : Ces propriétés ne sont prises en charge que par WebKit. navigateurs, y compris Chrome et Safari. D'autres navigateurs peuvent nécessiter des solutions alternatives.

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!