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

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>

原文由 user3550879 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

box-decoration-break: clone; 每个框片段都使用指定的边框独立呈现，填充和边距环绕每个片段。 border-radius、border-image 和 box-shadow 分别应用于每个片段。背景在每个片段中独立绘制，这意味着具有 background-repeat: no-repeat 的背景图像可能会重复多次。 -MDN

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

jsFiddle 示例

 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>

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS 的多行填充文本 技巧来拯救

HTML

 <div class="padded-multiline">
  <h1>
    <strong>
      How do I add padding to subsequent lines of an inline text element?
    </strong>
  </h1>
</div>

CSS

 .padded-multiline {
  line-height: 1.3;
  padding: 2px 0;
  border-left: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 {
  background-color: #c0c;
  padding: 4px 0;
  color: #fff;
  display: inline;
  margin: 0;
}
.padded-multiline h1 strong {
  position: relative;
  left: -10px;
}

注意：感谢 CSS Tricks 以及其他许多技巧

原文由 stephenmurdoch 发布，翻译遵循 CC BY-SA 3.0 许可协议