使用CSS實現換行文字的填滿效果
P粉969666670
2023-08-25 00:09:03
<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;"><div class='wrapper'>
<h1>
<span class='header-text'>
長文換行
</span>
</h1>
</div></pre>
</p>
<p>水平padding僅適用於文字換行的開頭和結尾，但我希望它適用於每一行。我可以接受border-radius不在每一行的換行點處，但我需要padding應用程式。 </p>
<p>如果我在.header-text類別中新增padding-top，它將應用於兩行，所以我不清楚為什麼換行的地方忽略了水平padding選項。 </p>
<p>有沒有辦法在CSS中實現這個效果？ </p>
你應該將.header-text的display屬性改為block或inline-block
你想要的可以透過使用
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; }