带有 CSS 的多行文本背景颜色会截断字符

Question

我在 HTML 文档中有多行文本内容（由浏览器包装，未由 <br> 分隔），并且想要添加背景颜色突出显示。我的第一次尝试是将要突出显示的文本包装在 <span> 中并适当地设置样式：

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
  color: white;
}

<p>Lorem ipsum <span id="highlight">dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span> in mi.

这呈现如下：

请注意带有下划线的字符（'g'、'p'、','）的底部是如何被截断的，它们看起来与下一行的背景重叠。

我尝试使用透明背景来解决此问题，但这只是为了更好地展示重叠：

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: rgba(0, 0, 255, 0.5);
  color: white;
}

<p>Lorem ipsum <span id="highlight">dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span> in mi.

另外，增加line-height 似乎也可以：

#highlight {
  background-color: rgba(0, 0, 255, 0.5);
  color: white;
  line-height: 1.2em;
}

<p>Lorem ipsum <span id="highlight">dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span> in mi.

但是，我需要一种方法来解决此重叠问题，而无需在视觉上增加行间距。

Answer 1

我发现的解决方法是在第二个<span> 中换行并使用position: relative 设置样式。外部跨度在相同位置渲染背景颜色，然后内部跨度在其顶部渲染文本。

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
}

#highlight > span {
  position: relative;
  color: white;
}

<p>Lorem ipsum <span id="highlight"><span>dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span></span> in mi.

编辑：注意“ipsum”中的“p”是如何被截断的。这可以通过更多<span>s 来解决：

/* part of CSS Reset */
body { line-height: 1; }

#highlight {
  background-color: blue;
}

#highlight > span {
  position: relative;
  color: white;
}

.no-highlight {
  position: relative;
}

<p><span class="no-highlight">Lorem ipsum </span><span id="highlight"><span>dolor sit amet, consectetur adipiscing elit. Donec sed ipsum ut nulla tempus sodales. Aliquam augue nisl, cursus nec volutpat in, sagittis</span></span> in mi.