巧妙解决单行文本溢出导致背景色多余的问题
在设计带背景色的单行文本溢出效果时，常常会遇到一个恼人的问题：最后部分的背景色会超出文本范围。本文将通过一个实际案例，演示如何解决这个问题。
问题描述
当单行文本溢出并使用省略号显示时，如果文本带有背景色，有时会发现背景色多出一块，如下所示：
假设我们有以下代码：
.oneline {
width: 640rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text {
background-color: #999999;
padding: 4rpx 8rpx;
margin-right: 12rpx;
}
}
{{item.label}}
解决方案
问题的关键在于inline。 为了避免背景色溢出，我们需要将inline-block。 这样，文本的背景色就会精确地包裹文本内容，省略号也不会影响背景色的显示。
修改后的CSS代码如下：
.oneline {
width: 640rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text {
display: inline-block; /*关键修改*/
background-color: #999999;
padding: 4rpx 8rpx;
margin-right: 12rpx;
}
}
通过简单的display: inline-block;设置，即可有效解决单行文本溢出时背景色多余的问题，获得干净整洁的页面效果。
