亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

使用CSS實現(xiàn)換行文本的填充效果
P粉969666670
P粉969666670 2023-08-25 00:09:03
0
2
644
<p>我這里有一個最簡化的示例:<a >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中實現(xiàn)這個效果?</p>
P粉969666670
P粉969666670

全部回復(2)
P粉936509635

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

P粉614840363

你想要的可以通過使用box-decoration-break來實現(xiàn),而且它甚至可以與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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板