Maison > interface Web > tutoriel CSS > Comment puis-je afficher des points de suspension dans un span débordant ?

Comment puis-je afficher des points de suspension dans un span débordant ?

Mary-Kate Olsen
Libérer: 2024-10-27 12:26:30
original
415 Les gens l'ont consulté

How Can I Display an Ellipsis in an Overflowing Span?

Affichage des points de suspension dans les travées débordantes

Pour afficher des points ("...") dans une travée avec débordement masqué, vous pouvez utiliser l'option text-overflow : propriété de points de suspension. Il tronque le texte qui déborde et affiche des points de suspension à la place.

Voici comment l'implémenter :

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

Dans cet extrait :

  • display: inline-block permet à l'étendue d'occuper de l'espace en ligne tout en restant semblable à un bloc.
  • width : 180px définit la largeur de l'étendue à 180 pixels.
  • espace blanc : nowrap empêche le retour à la ligne du texte dans l'étendue.
  • overflow : caché !important garantit que le contenu est masqué lorsqu'il dépasse la largeur de l'étendue.
  • text-overflow : les points de suspension tronquent le texte et affiche des points de suspension lorsque le contenu déborde .

En combinant ces propriétés, vous pouvez afficher des points de suspension dans votre span, indiquant qu'il y a plus de contenu masqué.

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal