Maison > interface Web > tutoriel CSS > le corps du texte

Comment implémenter des points de suspension ('...\') pour le débordement de texte en CSS ?

Susan Sarandon
Libérer: 2024-10-30 21:20:30
original
863 Les gens l'ont consulté

How to Implement Ellipsis (

Comment afficher les points de suspension ("...") en cas de débordement de texte en CSS

Lorsque vous traitez du texte qui dépasse l'espace disponible, il est courant d'avoir besoin d'un visuel indicateur pour suggérer que davantage de contenu est disponible. Ceci peut être réalisé en affichant des points (points de suspension) dans l'élément span à l'aide de CSS.

Pour activer cette fonctionnalité, suivez ces étapes :

  1. Assurez-vous que le débordement est masqué :
    Utilisez le débordement : caché !important; propriété pour masquer le texte débordant.
  2. Utiliser Text Overflow :
    Ajouter le text-overflow: ellipsis; propriété pour indiquer que le texte doit être coupé avec des points de suspension (...) lorsqu'il déborde de l'espace disponible.
  3. Facultatif : contrôle des espaces :
    Pour éviter le retour à la ligne et assurez-vous que les points de suspension apparaissent après le dernier caractère, définissez l'espace blanc : nowrap;.

Voici un exemple de code :

<code class="css">span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}</code>
Copier après la connexion
<code class="html"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span></code>
Copier après la connexion

En implémentant ces propriétés CSS, vous pouvez afficher efficacement des points de suspension dans un élément span avec un débordement masqué, indiquant qu'il y a plus de texte disponible au-delà de la plage visible.

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