html - 如何对多行文本中的每一行应用填充？

Question

我已将背景颜色应用于 <span>标签，还有左右padding放在上面。问题是:padding仅应用于 <span> 的左侧(开始)和右侧(结束) ，而不是当文本换行在多行时每行的左侧(开始)和右侧(结束)。

如何应用左右padding到中间线？

h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 1

您可以使用值为 clone 的 box-decoration-break 属性。

box-decoration-break: clone; Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The border-radius, border-image and box-shadow, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with background-repeat: no-repeat may be repeated multiple times. - MDN

在 caniuse.com 查看当前浏览器支持表

jsFiddle example

h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span { 
  background-color: rgba(0, 0, 0, 0.5); 
  padding: 0 20px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>