被包裹的文本背景重叠在另外线的其他文本

Question

我遇到了使用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

似乎文本在浏览器中呈现，使得文本的第二行/下行（及其背景颜色）位于文本的第一行/上行之前，因此第二行的背景位于下降字母的前面。到行高。

每一行都有一个新的背景，因为我们讨论的是内联元素。 我当然需要使用内联元素来获取文本背景。 我需要用css或JS解决这个问题，而不改变文本的文本行高度。

其他信息： 我在这里找到了一个很好的答案 Add padding at the beginning and end of each line of text

由thirtydot回答（在问题下方接受回答）， 但是如果你检查他的现场演示解决方案，并将那里的行高更改为更小的值，你将得到与我相同的问题。 Demo

Answer 1

由于您的line-height较少，而且我可以看到您正在为文字应用背景颜色，因此请增加line-height以及更多，而不是指定单位，例如em或px到line-height属性，而且不需要添加填充

试试这个：

line-height:25px;

更多信息：您需要提供inline-block;，因为您使用的是span，您只需使用div代替

Answer 2

一种解决方案：如果您希望保持行高小于“正常”，而不是使用颜色背景，请使用重复的png图像。在此png顶部添加一个等于重叠高度的透明区域。 ：）

Answer 3

给出<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>

Answer 4

将文本换行到跨度内并将跨度位置设置为相对位置。这样做！

CSS：

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

HTML：

<h1 class="your-backgrounded-h1-class"><span>Your Text!</span></h1>

Answer 5

对于不满意当前答案的任何人，我找到了一种解决方案，该解决方案允许任何line-height并适用于跨行的文本中断。使用渐变background-image。您可能需要根据需要调整百分比。

background-image: linear-gradient(to bottom, transparent, transparent 17%, orange 17%, orange);