环绕的文本背景与不同行上的其他文本重叠

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解决这个问题，不改变文本的文本行高。

附加信息：我在这里找到了一个很好的答案： 在每行文本的开头和结尾添加填充

由三十点回答（问题正下方的接受答案），但是如果您查看他的现场演示解决方案，并将那里的 line-height 更改为较小的值，您将遇到与我相同的问题。 演示

Answer 1

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