尝试复制文本，突出显示复制的文本，并使其透明。然后将不可见的高亮显示的复制文本叠加到可见文本上。
该解决方案要求建立默认字体，并按照OP代码（OoriginalPost aka the question）中的内容显式设置文本宽度（参见图I）。

图一

html { font: 300 2ch/2.25ex 'Segoe UI'; }
p { width: 11em; }

字符串
接下来，用<div> Package 可见文本，并为其分配一个类（例如：然后将<p>添加到<div>，并为其分配一个类（例如：复制<div>的文本并将其放置在<p>中。然后用<mark>将复制文本中应该突出显示的部分换行。（见图二）。

图二

<div class='anchor'>Copy this text. Highlight this part.
<p class='ghost'>Copy this text. <mark>Highlight this part.</mark></p>
</div>

型
以下是有关CSS测量单位的注解：

图三

| 项目名称| Description |
| --| ------------ |
| 相对于父元素的font-size的长度。|在本例中，默认值font-size由html设置，因此1em = 2ch。|
| 相对于“x”（取决于font-family）或0.5em的高度的长度。|在示例中，ex用于垂直padding、line-height和定位。|
| 相对于“0”宽度的长度（取决于font-family）。|在示例中，ch用于水平padding和定位。|

示例中有详细注解

html {
  font: 300 2ch/2.25ex 'Segoe UI'
}

p {
  width: 11em;
}

.anchor {
  /* 
  This establishes the <div> as the area for <p class='ghost'> to position 
  itself in.
  */
  position: relative;
  width: 11em;
  margin: 1em 0;
}

.ghost {
  /*
  Allows <p> to position itself within the perimeter of it's parent
  <div class='anchor'>.
  */
  position: absolute;
  /*
  Places <p> to occupy the layer underneath <div>.
  */
  z-index: -1;
  /*
  Shifts <p> down 
  */
  bottom: -2.5ex;
  /*
  Shifts <p> to the left
  */
  left: -0.5ch;
  /*
  <p> should be slightly wider than <div class='anchor'>
  */
  width: 12em;
  /*
  Hides the text
  */
  color: transparent;
}

mark {
  /*
  This establishes <mark> as the area for <mark>::before pseudo-element to position to
  */
  position: relative;
  /*
  Positions <mark> underneath <p>
  */
  z-index: -2;
  padding: 1ex 0.5ch 0 0;
  border-radius: 10px;
  /*
  Should be smaller than default line-height set at root to compensate for the
  extra padding
  */
  line-height: 1.25ex;
  /*
  Hides the text
  */
  color: transparent;
  background-color: hsl(200deg 100% 80%);
  /*
  Shapes the "box" as a continuous shape when wrapped. Needs vendor prefix
  for Chrome and Safari
  */
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}

mark::before {
  content: '\2009';
  /*
  Allows <::mark> to position itself within the perimeter of it's parent
  <mark>
  */
  position: absolute;
  /*
  Positions <::mark> underneath <mark>
  */
  z-index: -3;
  /*
  Keeps <::mark> at the top edge of <mark>
  */
  top: 0;
  /*
  Shifts <::mark> to the left.
  */
  left: -0.5ch;
  width: 6ch;
  padding: 1ex 0 1ex 1ch;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  /*
  Should be relatively smaller than the line-height of root because of 
  it's large padding. <::mark> is an extension of <mark> when it wraps over 
  to the next line. It also blends in if there is no wrapping.
  */
  line-height: 1.65ex;
  background-color: hsl(200deg 100% 80%);
}

mark::after {
  content: '\a0\a0';
  /*
  Allows <mark::> to position itself within the perimeter of it's parent
  <mark>
  */
  position: absolute;
  /*
  Positions <mark::> underneath <::mark>
  */
  z-index: -4;
  /*
  Keeps <::mark> at the top edge of <mark>
  */
  top: 0;
  /*
  Shifts <mark::> to the right.
  */
  right: -1.5ch;
  width: 3ch;
  padding: 1ex 1ch 1ex 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /*
  Should be relatively smaller than the line-height of root because of 
  it's large padding. <mark::> is the end of the highlight.
  */
  line-height: 1.65ex;
  background-color: hsl(200deg 100% 80%);
}

<p>Here is some text that isn't highlighted and it wraps around.</p>

<div class='anchor'>Here is some text. Here is some highlighted text.
  <p class='ghost'>Here is some text. <mark>Here is some highlighted text.</mark></p>
</div>

<div class='anchor'>All of this is highlighted.
  <p class='ghost'><mark>All of this is highlighted.</mark></p>
</div>

<div class='anchor'>This text is highlighted. This text is not.
  <p class='ghost'><mark>This text is highlighted.</mark> This text is not.</p>
</div>

的字符串

使用相对定位的更简单的解决方案，不需要复制内容。（我不知道这是否会在某些情况下打破。
左填充被负的左偏移抵消。

p {
  width: 12em;
}

mark.with-relative {
  border-radius: 10px;
  padding: 0.4em 0.2em 0.4em 0.25em;
  position: relative;
  z-index: -1;
  left: -0.25em;
  background-color: hsl(200deg 100% 80%);
  box-decoration-break: clone;
}

个字符
这会在突出显示结束于新行之后增加一点额外的空间，但这对我的用例来说是可以的。