如何用CSS突出显示文本中带有圆框的一些短语？

Question

我需要突出显示段落中的一些文本，但有一些限制 -

1. 突出显示之外的文本也应与突出显示的文本处于同一水平
2. 如果连续有多个单词，那么它们会受到连续突出显示，只需将整个单词放入标签中即可轻松实现
3. 如果文本移动到下一行，则两行之间的突出显示中应该有一个间隙，而不仅仅是一个矩形补丁
4. 两条线之间应该有足够的距离，以免看起来混乱。

TLDR：我想要与下面链接的图片完全相同的东西。谢谢您的帮助。

文本突出显示结果

这就是我所做的

<p class="introduction">
Hi so<span>This is what I did but not sure how to go from here</span></p>

p.introduction {
  width: 150px;
}

p.introduction span {
  background-color: #f48024;
  color: #1d1d1e;
  border-radius: 25px;
  float: left;
  padding: 0 5px 0 5px;
}

Answer 1

box-decoration-break: clone;可以做到这一点

p.introduction {
  width: 350px;
  font-size:25px;
  line-height:1.3;
}

p.introduction span {
  background-color: #f48024;
  color: #1d1d1e;
  border-radius: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 5px 0 5px;
}

<p class="introduction">Hi so <span>This is what I did but not sure how to go from here</span> and here is another <span>highlighted span</span></p>

Answer 2

也许，这会起作用。

/* Some decorations */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.text {
  padding: 50px;
  font-family: 'Roboto', sans-serif;
  line-height: 2;
  color: #293241;
}

/* Main part */

span {
  background: #ee6c4d;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 0 5px;
  -webkit-box-decoration-break: clone;
  -moz-background-inline-policy: clone;
  box-decoration-break: clone;
}

<article class="text">
<span>Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Duis consequat justo nec orci tincidunt posuere. Curabitur fringilla dolor a vestibulum rhoncus. Nam et feugiat lorem. Aliquam sollicitudin velit vel mi bibendum vehicula. Nam in est sed nibh dapibus iaculis. Aliquam porta vulputate imperdiet. Maecenas sagittis urna nec massa ullamcorper congue. Quisque dapibus augue et odio laoreet pharetra. <span>Etiam eget rhoncus lacus.</span> Praesent eu quam sed neque sodales venenatis non nec lorem. Sed fermentum efficitur massa vel egestas. Pellentesque condimentum in dolor sed faucibus. Integer nec urna mattis, dignissim neque at, pharetra odio. Nullam at ultrices quam. <span>Phasellus sagittis mi varius nulla</span> egestas, at laoreet orci tristique. Integer tempus orci in ipsum accumsan, at convallis justo dignissim.
</article>

关于 JSFiddle