使用CSS實現換行文字的填滿效果

Question

我這裡有一個最簡化的例子：https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

包含以下內容：

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           長文換行
         </span>
  </h1>
</div>

水平padding僅適用於文字換行的開頭和結尾，但我希望它適用於每一行。我可以接受border-radius不在每一行的換行點處，但我需要padding應用程式。

如果我在.header-text類別中新增padding-top，它將應用於兩行，所以我不清楚為什麼換行的地方忽略了水平padding選項。

有沒有辦法在CSS中實現這個效果？

Answer 1

你應該將.header-text的display屬性改為block或inline-block

Answer 2

你想要的可以透過使用box-decoration-break來實現，而且它甚至可以與border-radius一起使用：

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           长文本换行
         </span>
  </h1>
</div>