在设计带背景色的单行文本溢出效果时，常常会遇到一个恼人的问题：最后部分的背景色会超出文本范围。本文将通过一个实际案例，演示如何解决这个问题。
当单行文本溢出并使用省略号显示时，如果文本带有背景色，有时会发现背景色多出一块，如下所示：
假设我们有以下代码：
.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>问题的关键在于<text></text>元素的默认显示方式是inline。 为了避免背景色溢出，我们需要将<text></text>元素的显示方式改为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;设置，即可有效解决单行文本溢出时背景色多余的问题，获得干净整洁的页面效果。
以上就是如何解决文字单行溢出省略号时多余背景色问题？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
607
收藏
