Pourquoi « text-overflow : points de suspension » ne fonctionne-t-il pas sur mon élément Span ?

"text-overflow: ellipsis" Non fonctionnel

Lorsque vous essayez d'utiliser "text-overflow: ellipsis" pour tronquer du texte dans un < ;envergure> élément, les points de suspension n'apparaissent pas lorsque la taille de la fenêtre est réduite.

Solution

Pour activer la fonctionnalité "text-overflow: points de suspension", il est nécessaire d'inclure l'élément Propriétés CSS suivantes en plus de "text-overflow":

• Débordement : Garantit que le contenu de l'élément dépasse sa zone de conteneur et n'est pas masqué
• Largeur (ou max-width) : Définit la largeur maximale de l'élément dans lequel le texte sera contenu
• Affichage : Spécifie le type d'affichage de l'élément (par exemple, bloc , inline-block)
• White-space : Contrôle la façon dont les espaces sont gérés dans l'élément

Exemple de code

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Explication

Dans l'exemple fourni, le L'élément a une largeur de 100 px et la propriété de débordement est définie sur « caché », garantissant que tout contenu excédentaire est masqué dans les limites de l'élément. La propriété display est définie sur "block" pour forcer l'élément à occuper un bloc d'espace rectangulaire. Enfin, la propriété espace blanc est définie sur "nowrap" pour empêcher les sauts de ligne dans le texte.

Une fois ces propriétés appliquées, la propriété "text-overflow: ellipsis" devient fonctionnelle, tronquant le texte dans le < ;envergure> élément et en ajoutant des points de suspension (...) lorsque la taille de la fenêtre est réduite à un point où le texte dépasse la largeur de l'élément.

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!