如何在 CSS 中對多行文本應用填充
我將介紹如何使用 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; 這樣，它在所有瀏覽器上都正常工作：