用于概述跨度的CSS样式

Question

我正在尝试设置一个文本高亮，但是完成它的CSS完全逃脱了我。以下是HTML的示例：

This is a long <span class="selection">piece of text, whose sole purpose is being long enough to wrap over several lines,</span> so I can illustrate my problem.

CSS：

.selection {
  background: lightblue;
  padding-left: 3px;
  padding-right: 3px;
  border: solid blue thin;    
}

我希望实现的是跨度所涵盖区域的大纲，如下所示：

但相反，边界在两行之间复制：

然后我想我会从我的CSS中删除border，这会给我这个：

但实际上它看起来很奇怪：

我从概念上理解发生了什么;范围仅包括文本，而不包括行间距。我的CSS技能并没有比上面的片段更进一步，但是真的没有办法摆脱中间的那些边界线吗？

Answer 1

您应该使用正确的标记... span 是一个通用内联标记，但是，要突出显示文本，您应该使用标记 https://developer.mozilla.org/en/docs/Web/HTML/Element/mark

＆＃13;

＆＃13;

.text-highlighted {
  background: cyan;
  outline: 1px solid blue;
  padding: .2em .4em;
}

.entry { max-width: 200px; padding: .5em; }

＆＃13;

<div class="entry">This is a long <mark class="text-highlighted">piece of text, whose sole purpose is being long enough to wrap over several lines,</mark> so I can illustrate my problem.</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用outline代替border来获得所需的外观＆amp;感觉。 [我从Hitmands的答案中取出了片段并稍微改了一下]

＆＃13;

＆＃13;

.text-highlighted {
  background: cyan;
  outline: 1px solid blue;
  padding: .2em .4em;
}

.entry { max-width: 200px; padding: .5em; }

＆＃13;

<div class="entry">This is a long <mark class="text-highlighted">piece of text, whose sole purpose is being long enough to wrap over several lines,</mark> so I can illustrate my problem.</div>

＆＃13;

＆＃13;

＆＃13;