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

Question

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

突出显示之外的文本也应该与突出显示的文本处于同一级别

如果有多个连续的单词，那么它们会处于连续的高亮状态，只需将整个单词放在标签中即可轻松实现

如果文本移动到下一行，两行之间的突出显示应该有一个间隙，而不仅仅是一个矩形补丁

两条线之间应该有足够的距离，这样它就不会看起来很困惑。

TLDR :我想要与下面链接的图像完全相同的东西。谢谢您的帮助。
Text Highlighted Outcome
这就是我所做的

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