如何在CSS中为多行应用填充物

在重新设计这个博客的某些方面时，我需要为每篇博客文章的每一行标题添加一些填充。

我有这样的HTML：

<h1 class="post-title">
  <span>{{ .Title }}</span>
</h1>

我添加了这个CSS：

.post-title span {
  padding: 0px 30px;
  background-color: rgb(254,207,12);
}

很明显它起作用了，它在文章标题的左边和右边增加了30px的填充，你可以看到，这要感谢黄色的背景。

但是，如果标题较长，而且文字流向新的一行，我就遇到了一个问题，因为在每一行的末尾都没有应用填充。

看到了吗？第二行的A 字母前没有填充，第一行的分号后也没有填充。

为了解决这个问题，我使用了这个名为box-decoration-break 的CSS属性，其值为clone ，其-webkit- 的前缀属性为Safari。

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

然后，它在所有的浏览器上都运行良好。