如何使用 CSS 将填充应用于包装文本？

Question

我这里有一个最小的例子：https : //codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

包含以下内容：

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           Long text that wraps
         </span>
  </h1>
</div>

水平填充仅适用于它环绕的文本的开头和结尾，但我希望它适用于每一行。我可以接受边界半径不在每行的换行点，但我需要应用填充。

如果我将 padding-top 放入适用于两条线的 .header-text 类，那么我不清楚为什么线环绕的点会忽略水平填充选项。

有没有办法在 CSS 中做到这一点？

Answer 1

你想要的东西可以使用box-decoration-break它来实现，它甚至可以与border-radius：

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           Long text that wraps
         </span>
  </h1>
</div>