How to solve the problem of unnecessary background color when single line of text with background color overflows ellipsis?

Solution to the overflow of ellipsis in a single line of text, causing redundant background color

In CSS, when using text-overflow: ellipsis to deal with single-line text overflow, if the text has a background color, the background color residue of the last character will often occur. This is because text-overflow: ellipsis acts on the elements within the line, while the background color is applied to the text element itself, resulting in the background color being visible after truncation.

The following figure shows an example of the problem:

Here are the CSS and HTML codes for the problem:

 .oneline {
  width: 640rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text {
    background-color: #999999;
    padding: 4rpx 8rpx;
    margin-right: 12rpx;
  }
}

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

The solution is to modify the display method of text element to inline-block . inline-block element can be processed as a whole block, avoiding the background color residue problem caused by simple in-line element truncation.

The modified CSS code is as follows:

 .oneline {
  width: 640rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text {
    display: inline-block; /* is modified to inline-block */
    background-color: #999999;
    padding: 4rpx 8rpx;
    margin-right: 12rpx;
  }
}

By setting text element to inline-block , text truncation will be based on the entire element, effectively avoiding the appearance of unnecessary background colors and ensuring better visual effect of text overflowing ellipsis.

The above is the detailed content of How to solve the problem of unnecessary background color when single line of text with background color overflows ellipsis?. For more information, please follow other related articles on the PHP Chinese website!