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

Pourquoi mes points de suspension de débordement de texte ne fonctionnent-ils pas ?

Barbara Streisand
Libérer: 2024-11-10 19:05:02
original
305 Les gens l'ont consulté

Why Isn't My Text Overflow Ellipsis Working?

Les points de suspension de débordement de texte ne fonctionnent pas

La propriété text-overflow est destinée à tronquer le texte affiché et à ajouter des points de suspension (...) pour indiquer que le texte intégral n'est pas visible. Cependant, si cette propriété ne fonctionne pas comme prévu, il est crucial de s'assurer que plusieurs propriétés CSS clés sont en place.

Propriétés CSS requises :

Pour activer correctement la text-overflow : effet de points de suspension, vous devez avoir défini les propriétés CSS suivantes :

  • Affichage : Définissez la propriété d'affichage sur "block" ou "inline-block" pour garantir que le texte occupe de l'espace sur l'écran.
  • White-Space : Utilisez white-space : nowrap pour empêcher le texte de l'enroulement sur plusieurs lignes.
  • Débordement : Définissez le débordement sur "caché" pour masquer toute partie du texte qui dépasse celle de son conteneur width.
  • Width (ou Max-Width) : Spécifiez une largeur fixe (ou largeur maximale) pour limiter l'espace disponible pour le texte.

Démo avec code correct :

L'extrait CSS suivant montre comment appliquer correctement les éléments nécessaires propriétés :

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden;
}
Copier après la connexion

Exemple :

<span>Test test test test test test</span>
Copier après la connexion

En implémentant ces propriétés, vous pouvez vous assurer que le texte spécifié sera tronqué et affichera des points de suspension lorsque son conteneur la largeur est trop étroite pour accueillir l'intégralité du texte.

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