<p>我这里有一个最简化的示例：<a href="https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ">https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ</a></p> <p>包含以下内容：</p> <p> <pre class="brush:css;toolbar:false;">.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; }</pre> <pre class="brush:html;toolbar:false;">&lt;div class='wrapper'&gt; &lt;h1&gt; &lt;span class='header-text'&gt; 长文本换行 &lt;/span&gt; &lt;/h1&gt; &lt;/div&gt;</pre> </p> <p>水平padding仅适用于文本换行的开头和结尾，但我希望它适用于每一行。我可以接受border-radius不在每一行的换行点处，但我需要padding应用。</p> <p>如果我在.header-text类中添加padding-top，它将应用于两行，所以我不清楚为什么换行的地方忽略了水平padding选项。</p> <p>有没有办法在CSS中实现这个效果？</p>

.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>