背景色の楕円を覆う単一のテキストのテキストの線の場合、不必要な背景色の問題を解決する方法は？

単一のテキストでの楕円のオーバーフローの解決策の解決、冗長な背景色を引き起こす

CSSでは、 text-overflow: ellipsisを使用してシングルラインテキストオーバーフローを扱う場合、テキストに背景色がある場合、最後の文字の背景色の残留物がしばしば発生します。これは、 text-overflow: ellipsisライン内の要素に作用する一方で、背景色がテキスト要素自体に適用されるためであり、その結果、背景色は切り捨て後に見えます。

次の図は、問題の例を示しています。

問題のCSSおよびHTMLコードは次のとおりです。

 .Oneline {
  幅：640rpx;
  オーバーフロー：隠し;
  テキストオーバーフロー：省略記号;
  ホワイトスペース：nowrap;
  文章 {
    バックグラウンドカラー：＃999999;
    パディング：4RPX 8RPX;
    マージン右：12rpx;
  }
}

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

解決策は、 text要素の表示方法をinline-blockに変更することです。 inline-block要素は、単純なインライン要素の切り捨てによって引き起こされる背景色の残留問題を回避し、ブロック全体として処理できます。

変更されたCSSコードは次のとおりです。

 .Oneline {
  幅：640rpx;
  オーバーフロー：隠し;
  テキストオーバーフロー：省略記号;
  ホワイトスペース：nowrap;
  文章 {
    ディスプレイ：インラインブロック。 / *インラインブロックに変更されます */
    バックグラウンドカラー：＃999999;
    パディング：4RPX 8RPX;
    マージン右：12rpx;
  }
}

text要素inline-blockに設定することにより、テキストの切り捨ては要素全体に基づいており、不必要な背景色の外観を効果的に回避し、テキストの楕円形の視覚効果を確保します。

以上が背景色の楕円を覆う単一のテキストのテキストの線の場合、不必要な背景色の問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。