当一条线被分成两部分时如何有一个平衡的填充？

Question

在下面的代码片段中，我注意到添加 left/right 填充可以根据需要提供更平衡的颜色突出显示，请参阅 2. 了解更多详细信息：

.a { 
    font-size: 4em;
    font-family: sans-serif;
    background-color: #ff800f;
}

.b { 
    padding: 0 0.2em;
}

#c { width: 200px; }

1. <span class="a">Hi there</span> not enough space at left/right in comparison to the height of the highlighting
<br>
2. <span class="a b">Hi there</span> better
<br>
3. <div id="c">Hello and <span class="a b">Hi there</span></div>

问题：当一个颜色高亮的行被分成两部分时，如示例3中的Hi / there，如何使末尾自动多填充第一行，第二行的开头？

在示例3中，应该是这样的：

Answer 1

将 box-decoration-break: clone（除了 Firefox 之外的大多数浏览器需要供应商前缀，例如 -webkit-）应用到 span。

clone:

"Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment..." -(MDN)

.a {
  font-size: 4em;
  font-family: sans-serif;
  background-color: #ff800f;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.b {
  padding: 0 0.2em;
}

#c {
  width: 200px;
}

1. <span class="a">Hi there</span> not enough space at left/right in comparison to the height of the highlighting
<br> 2. <span class="a b">Hi there</span> better
<br> 3.
<div id="c">Hello and <span class="a b">Hi there</span></div>

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

Answer 2

不间断 space 是解决间距挑战的一种方法 &nbsp。

3. <div id="c">Hello and <span class="a b">Hi&nbsp &nbspthere</span></div>

当一条线被分成两部分时如何有一个平衡的填充？

How to have a balanced padding when a line is broken into 2 parts?

html

css

padding