前端開發中帶背景色文字單行溢出問題的巧妙解決
在前端開發中，處理帶背景色的文字單行溢出時，經常會遇到一個惱人的問題：多余的背景色塊。本文將深入探討這個問題，并提供一個有效的解決方案。
問題：
當我們使用以下代碼實現帶背景色的文字單行溢出時，最后一個文字后面可能會出現一個多余的、帶有背景色的空白塊：
.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>
原因分析：
這是因為默認情況下，
解決方案：
將
.oneline { width: 640rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text { display: inline-block; /*關鍵修改*/ background-color: #999999; padding: 4rpx 8rpx; margin-right: 12rpx; } }
通過將 text 元素設置為 inline-block，使其具備塊級元素的特性，text-overflow: ellipsis 的截斷操作將會在元素塊級別進行，從而避免了多余背景色塊的產生。
通過這個簡單的修改，您可以輕松解決這個常見的前端問題，使您的頁面布局更加完美。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
