Maison >interface Web >tutoriel CSS >Comment afficher des ellipses dans une travée avec un débordement caché ?

Comment afficher des ellipses dans une travée avec un débordement caché ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-30 04:27:02260parcourir

How to Display Ellipses in a Span with Hidden Overflow?

Comment concaténer des ellipses dans un contenu avec un débordement masqué

Dans cette question, un développeur exprime le besoin d'afficher des ellipses ("... ") dans un élément span avec débordement caché. Ils fournissent un extrait de code CSS présentant le débordement caché, mais pas l'affichage des points de suspension.

La solution fournie suggère d'utiliser la propriété text-overflow: ellipsis, qui permet la troncature du contenu et la affichage d'ellipses lorsque le contenu de l'élément dépasse sa largeur. Voici le code CSS corrigé :

<code class="css">span {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

La propriété supplémentaire white-space: nowrap garantit que le contenu ne s'enroule pas sur plusieurs lignes, ce qui peut empêcher les points de suspension d'apparaître correctement.

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!

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