如何在 CSS 中對多行文本應用填充

我將介紹如何使用 box-decoration-break CSS 屬性對多行文本進行填充。

在重新設計部分博客時，我需要對每個博客標題的每行添加一些填充。以下是我的 HTML 代碼：

1
2
3

<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，並使用 Safari 的 -webkit- 属性：

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

這樣，它在所有瀏覽器上都正常工作：

tags: [“CSS”, “box-decoration-break”, “padding”]