How to apply padding to every line in multi-line text?

Question

I have background color applied to the <span> tag, there is also left and right padding set on it. The problem is: the padding is applied only to the left (beginning) and right (ending) of the <span>, not the left (beginning) and right (ending) of each line when the text is wrapped on several lines.

How can I apply the left and right padding to the middle lines?

h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 1

You could use box-decoration-break property with value of clone.

box-decoration-break: clone; Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The border-radius, border-image and box-shadow, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with background-repeat: no-repeat may be repeated multiple times. - MDN

See the current browser support tables at caniuse.com

jsFiddle example

h1 {    font-weight: 800;    font-size: 5em;    line-height: 1.35em;    margin-bottom: 40px;    color: #fff;  }  h1 span {     background-color: rgba(0, 0, 0, 0.5);     padding: 0 20px;    -webkit-box-decoration-break: clone;    box-decoration-break: clone;  }

<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

Answer 2

Multi-line-padded-text by CSS Tricks to the rescue

The HTML

<div class="padded-multiline">
  <h1>
    <strong>
      How do I add padding to subsequent lines of an inline text element?
    </strong>
  </h1>
</div>

The CSS

.padded-multiline { 
  line-height: 1.3; 
  padding: 2px 0; 
  border-left: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 { 
  background-color: #c0c;
  padding: 4px 0;
  color: #fff; 
  display: inline;
  margin: 0; 
}
.padded-multiline h1 strong { 
  position: relative;
  left: -10px; 
}

NB: thanks to CSS Tricks for this, and so many other tips