Bagaimana menyelesaikan masalah warna latar belakang yang tidak perlu apabila satu baris teks dengan warna latar belakang melimpah ellipsis?

Penyelesaian kepada limpahan ellipsis dalam satu baris teks, menyebabkan warna latar belakang yang berlebihan

Dalam CSS, apabila menggunakan text-overflow: ellipsis untuk menangani limpahan teks tunggal, jika teks mempunyai warna latar belakang, sisa warna latar belakang watak terakhir akan sering berlaku. Ini kerana text-overflow: ellipsis bertindak pada unsur-unsur dalam garis, manakala warna latar belakang digunakan pada elemen teks itu sendiri, menghasilkan warna latar belakang yang dapat dilihat selepas pemotongan.

Angka berikut menunjukkan contoh masalah:

Berikut adalah kod CSS dan HTML untuk masalahnya:

 .oneline {
  lebar: 640RPX;
  Limpahan: Tersembunyi;
  Teks-overflow: ellipsis;
  ruang putih: nowrap;
  teks {
    latar belakang warna: #999999;
    Padding: 4RPX 8RPX;
    margin-kanan: 12RPX;
  }
}

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

Penyelesaiannya adalah untuk mengubah suai kaedah paparan elemen text kepada inline-block . Elemen inline-block boleh diproses sebagai blok keseluruhan, mengelakkan masalah sisa warna latar belakang yang disebabkan oleh pemotongan elemen dalam talian yang mudah.

Kod CSS yang diubahsuai adalah seperti berikut:

 .oneline {
  lebar: 640RPX;
  Limpahan: Tersembunyi;
  Teks-overflow: ellipsis;
  ruang putih: nowrap;
  teks {
    paparan: blok sebaris; / * diubahsuai untuk menyekat sebaris */
    latar belakang warna: #999999;
    Padding: 4RPX 8RPX;
    margin-kanan: 12RPX;
  }
}

Dengan menetapkan elemen text kepada inline-block , pemotongan teks akan berdasarkan seluruh elemen, dengan berkesan mengelakkan penampilan warna latar belakang yang tidak perlu dan memastikan kesan visual yang lebih baik dari ellipsis melimpah teks.

Atas ialah kandungan terperinci Bagaimana menyelesaikan masalah warna latar belakang yang tidak perlu apabila satu baris teks dengan warna latar belakang melimpah ellipsis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!