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

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;

2. Largeur ou largeur maximale :

width: [desired width];
max-width: [maximum width];

3. Affichage :

display: block;

4. White-Space :

white-space: nowrap;

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
}

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>

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!