我將介紹如何使用 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;
這樣,它在所有瀏覽器上都正常工作: