How can I make padding apply to wrapped text with CSS?

Question

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

Containing 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'>
           Long text that wraps
         </span>
  </h1>
</div>

The horizontal padding only applies to the very beginning and end of the text where it wraps, but I want it to apply on every line. I'm OK with the border-radius not being at the line-break points of every line, but I need the padding to apply.

If I put padding-top into the .header-text class that applies to both lines, so I'm unclear why the points where lines wrap ignore the horizontal padding options.

Is there a way to do this in CSS?

Answer 1

What you want can be achieve using box-decoration-break and it will even work 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'>
           Long text that wraps
         </span>
  </h1>
</div>