Use CSS to achieve the filling effect of line-wrapped text
P粉969666670
2023-08-25 00:09:03
<p>I have a minimalist example here: <a href="https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ">https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ</ a></p>
<p>Contains the following: </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'>
Wrap long text
</span>
</h1>
</div></pre>
</p>
<p>Horizontal padding only works at the beginning and end of text wrapping, but I want it to work on every line. I can accept that the border-radius is not at the break point of each line, but I need padding to be applied. </p>
<p>If I add padding-top in the .header-text class, it applies to both lines, so I'm not sure why the horizontal padding option is ignored where the line breaks. </p>
<p>Is there a way to achieve this effect in CSS? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You should change the display attribute of .header-text to block or inline-block
What you want can be achieved by using
box-decoration-break, and it even works withborder-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; }