Use CSS to achieve the filling effect of line-wrapped text

Question

I have a minimalist example here: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

Contains the following:

.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'>
           Wrap long text
         </span>
  </h1>
</div>

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.

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.

Is there a way to achieve this effect in CSS?

Answer 1

You should change the display attribute of .header-text to block or inline-block

Answer 2

What you want can be achieved by using box-decoration-break, and it even works with 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>