我將介紹如何使用 box-decoration-break 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,並使用 Safari 的 -webkit- 属性:

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

這樣,它在所有瀏覽器上都正常工作: