Comment résoudre le problème de la couleur d'arrière-plan inutile lorsque une seule ligne de texte avec une couleur d'arrière-plan déborde des ellipses?

Solution au débordement d'ellipsise dans une seule ligne de texte, provoquant une couleur d'arrière-plan redondante

Dans CSS, lors de l'utilisation de text-overflow: ellipsis pour faire face au débordement de texte en une seule ligne, si le texte a une couleur d'arrière-plan, le résidu de couleur d'arrière-plan du dernier caractère se produit souvent. En effet, text-overflow: ellipsis agit sur les éléments de la ligne, tandis que la couleur d'arrière-plan est appliquée à l'élément texte lui-même, ce qui entraîne la visible de la couleur d'arrière-plan après la troncature.

La figure suivante montre un exemple du problème:

Voici les codes CSS et HTML pour le problème:

 .Oneline {
  Largeur: 640rpx;
  débordement: caché;
  Text-overflow: ellipsis;
  Espace blanc: Nowrap;
  texte {
    Color en arrière-plan: # 999999;
    rembourrage: 4rpx 8rpx;
    marge-droite: 12rpx;
  }
}

<view class="oneline"><text wx:for="{{flavorsarr}}" wx:key="index"> {{item.label}}</text></view>

La solution consiste à modifier la méthode d'affichage de text en inline-block . inline-block peut être traité comme un bloc entier, en évitant le problème des résidus de couleur d'arrière-plan causé par une simple troncature de l'élément en ligne.

Le code CSS modifié est le suivant:

 .Oneline {
  Largeur: 640rpx;
  débordement: caché;
  Text-overflow: ellipsis;
  Espace blanc: Nowrap;
  texte {
    Affichage: bloc en ligne; / * est modifié en bloc en ligne * /
    Color en arrière-plan: # 999999;
    rembourrage: 4rpx 8rpx;
    marge-droite: 12rpx;
  }
}

En définissant text sur inline-block , la troncature du texte sera basée sur l'ensemble de l'élément, évitant efficacement l'apparition de couleurs d'arrière-plan inutiles et assurant un meilleur effet visuel de l'ellipsie débordant de 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!