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

Question

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这将呈现如下：

请注意带有下行符的字符底部（＆＃39;＆＃39;＆＃39; p＆＃39;，＆＃39;，＆＃39;）是如何被截断的，它们看起来与它们重叠下一行的背景。

我尝试用透明背景解决这个问题，但它只能更好地展示重叠：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，增加line-height似乎有效：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

我找到的修复方法是将文本换成第二个<span>并使用position: relative设置样式。外跨度将背景颜色渲染到相同位置，然后内部跨度将文本呈现在其上方。

＆＃13;

＆＃13;

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

#highlight {
  background-color: blue;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;