8

cssを使用した行の高さとテキストの背景のスタイル設定に問題があります。

<style>
.wrap  {
    width: 70%; 
    line-height:0.9;
}
.hl {

        background-color: orange;
}
</style>
<div class="wrap">
       <span class="hl">
          Some content will go here which will be split into several lines depending of resolution (depending on width of wraper)
       </span>
</div>

ブラウザの幅に応じて複数行に折り返される動的テキストがありますこのテキストの行の高さは「通常」よりも低くなっています。テキストに背景色を適用すると、この背景はディセンダー文字の下部と重なります：g、p、y、q、j

ここに画像の説明を入力してください テキストはブラウザでレンダリングされ、テキストの2行目/下行（およびその背景色）がテキストの1行目/上行の前にあるように見えます。したがって、この2行目の背景はディセンダー文字の前にあります。行の高さに。

インライン要素について話しているため、各行は新しい背景を取得します。もちろん、テキストの背景を取得するには、インライン要素を使用する必要があります。テキストのテキスト行の高さを変更せずに、cssまたはJSでこの問題を解決する必要があります。

追加情報：ここで素晴らしい答えを見つけました： テキストの各行の最初と最後にパディングを追加します

30ドット（質問のすぐ下で受け入れられた回答）で回答しましたが、彼のライブデモソリューションを確認し、そこで行の高さを小さい値に変更すると、私と同じ問題が発生します。 デモ

4

5 に答える 5

3

あなたのline-height数が少なく、私が見ることができるように、あなたはあなたのテキストに背景色を適用しているので、あなたのプロパティのように、またはあなたのプロパティにline-height指定された単位がなく、それにパディングを追加する必要がないので、あなたを増やしてくださいempxline-height

これを試して ：

line-height:25px;

詳細：スパンを使用しているため、指定する必要があります。代わりにinline-block;使用するだけです。div

于 2012-10-29T08:20:06.593 に答える
1

1つの解決策：色の背景を使用する代わりに、行の高さを「通常」よりも小さくしたい場合は、繰り返しpng画像を使用します。このpngの上部に、オーバーラップの高さに等しい透明な領域を追加します。:)

于 2012-10-29T17:39:57.000 に答える
1

テキストをスパン内にラップし、スパン位置を相対として設定します。これで十分です！

CSS：

.your-backgrounded-h1-class span { position: relative; }

HTML：

<h1 class="your-backgrounded-h1-class"><span>Your Text!</span></h1>
于 2015-04-27T21:28:21.053 に答える
1

与える<span> display: inline-block;

.wrap {
  width: 70%;
  line-height: 0.9;
}

.hl {
  font-size: 3em;
  background-color: orange;
  display: inline-block;
}
<div class="wrap">
  <span class="hl">
          Some content will go here which will be split into several lines depending of resolution (depending on width of wraper)
       </span>
</div>

于 2020-01-24T07:06:53.603 に答える
1

現在の回答に不満がある人のために、私は、任意のテキストを許可し、line-height行をまたがるテキストに対して機能するソリューションを見つけました。グラデーションを使用しbackground-imageます。必要に応じてパーセンテージを調整する必要があるかもしれません。

background-image: linear-gradient(to bottom, transparent, transparent 17%, orange 17%, orange);
于 2020-10-07T02:14:20.900 に答える