Wie löste ich das Problem der unnötigen Hintergrundfarbe, wenn einzelne Textzeile mit Hintergrundfarbe die Ellipsis überläuft?

Lösung für den Überlauf von Ellipsis in einer einzigen Textzeile, die eine redundante Hintergrundfarbe verursacht

In CSS tritt bei Verwendung von text-overflow: ellipsis zum Einleitungs-Textüberlauf häufig auf, wenn der Text eine Hintergrundfarbe aufweist, häufig der Hintergrundfarbe des letzten Zeichens auftritt. Dies liegt daran, dass text-overflow: ellipsis auf den Elementen innerhalb der Zeile wirkt, während die Hintergrundfarbe auf das Textelement selbst angewendet wird, was dazu führt, dass die Hintergrundfarbe nach dem Abschneiden sichtbar ist.

Die folgende Abbildung zeigt ein Beispiel für das Problem:

Hier sind die CSS- und HTML -Codes für das Problem:

 .oneline {
  Breite: 640RPX;
  Überlauf: versteckt;
  Text-Overflow: Ellipsis;
  weißer Raum: Nowrap;
  Text {
    Hintergrundfarbe: #999999;
    Polsterung: 4RPX 8RPX;
    Rand-Rechts: 12RPX;
  }
}

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

Die Lösung besteht darin, die Anzeigemethode des text auf inline-block zu ändern. inline-block -Element kann als ganzer Block verarbeitet werden, wodurch das durch einfache Inline-Element-Kürzung verursachte Hintergrundfarbeproblem vermieden werden kann.

Der geänderte CSS -Code lautet wie folgt:

 .oneline {
  Breite: 640RPX;
  Überlauf: versteckt;
  Text-Overflow: Ellipsis;
  weißer Raum: Nowrap;
  Text {
    Anzeige: Inline-Block; / * wird an Inline-Block modifiziert */
    Hintergrundfarbe: #999999;
    Polsterung: 4RPX 8RPX;
    Rand-Rechts: 12RPX;
  }
}

Durch die Festlegung text in inline-block basiert die Textabschaltung auf dem gesamten Element, wodurch das Erscheinungsbild unnötiger Hintergrundfarben effektiv vermieden wird und eine bessere visuelle Wirkung von textüberlaufenden Ellipsis gewährleistet.

Das obige ist der detaillierte Inhalt vonWie löste ich das Problem der unnötigen Hintergrundfarbe, wenn einzelne Textzeile mit Hintergrundfarbe die Ellipsis überläuft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!