html - 带CSS的多行文字background-color会截断字符

我在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.

但是，我需要一种方法来解决这个重叠问题，而不增加视觉上的行距。

最佳答案

我找到的解决方法是在一秒钟内将文本包装起来，并用<span>设置其样式。外跨在同一位置呈现背景色，然后内跨在其上呈现文本。

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

关于html - 带CSS的多行文字background-color会截断字符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31440810/