Maison > interface Web > tutoriel CSS > Pourquoi mon « débordement de texte : points de suspension » ne fonctionne-t-il pas ?

Pourquoi mon « débordement de texte : points de suspension » ne fonctionne-t-il pas ?

Barbara Streisand
Libérer: 2024-11-10 03:47:02
original
291 Les gens l'ont consulté

Why isn't my

Dépannage du problème "text-overflow: ellipsis"

L'utilisation de "text-overflow: ellipsis" vise à tronquer le texte au sein d'un élément , affichant "..." lorsque le texte atteint une limite spécifiée. Cependant, dans certains cas, cette fonctionnalité peut ne pas fonctionner comme prévu.

Dans l'exemple fourni, il semble que « text-overflow: ellipsis » n'ait pas l'effet souhaité. Pour résoudre ce problème, assurez-vous que les styles appropriés ont été appliqués correctement. En plus de « text-overflow: ellipsis », le CSS doit inclure les propriétés suivantes :

1. Débordement :

overflow: hidden;
Copier après la connexion

2. Largeur ou largeur maximale :

width: [desired width];
max-width: [maximum width];
Copier après la connexion

3. Affichage :

display: block;
Copier après la connexion

4. White-Space :

white-space: nowrap;
Copier après la connexion

Un extrait CSS complet qui intègre toutes ces propriétés est fourni ci-dessous :

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

En appliquant ces styles, l'élément "span" sera réduit en largeur à mesure que la fenêtre devient plus petite, ce qui entraîne la troncature du texte avec des points de suspension. Voici un exemple pour illustrer son fonctionnement :

HTML :

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

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