多行文本背景颜色与CSS截断字符

Question

我在 HTML 文档中有多行文本内容（由浏览器包裹，而不是由 分隔<br>），并且想要添加背景色突出显示。我的第一次尝试是将我想要突出显示的文本包装在 a 中<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”是如何被切断的。这可以用更多的 s 来解决<span>：

/* 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.