Comment obtenir un débordement de texte multiligne avec Ellipsis en 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;
}

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!

css chrome safari webkit if for while require Property number default this display overflow Other

Déclaration：

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