单行文本溢出省略号导致背景色多余的解决方案
在CSS中，使用
处理单行文本溢出时，如果文本带有背景色，常常会出现最后一个字符的背景色残留问题。这是因为
作用于行内元素，而背景色应用于文本元素本身，导致截断后背景色仍然可见。
下图所示为问题示例：
以下为问题的CSS和HTML代码：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
解决方法是将
元素的显示方式修改为
。
元素可以作为一个整体块处理，避免了单纯行内元素截断带来的背景色残留问题。
修改后的CSS代码如下：
通过将
元素设置为
，文本截断将基于整个元素进行，从而有效避免了多余背景色的出现，确保了文本溢出省略号的视觉效果更佳。
text-overflow: ellipsistext-overflow: ellipsis.oneline {
width: 640rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text {
background-color: #999999;
padding: 4rpx 8rpx;
margin-right: 12rpx;
}
}{{item.label}} textinline-blockinline-block.oneline {
width: 640rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text {
display: inline-block; /* 此处修改为 inline-block */
background-color: #999999;
padding: 4rpx 8rpx;
margin-right: 12rpx;
}
}textinline-block