title: How to apply padding to every line in multi-line text?
body: <p>I have background color applied to the <code>&lt;span&gt;</code> tag, there is also left and right <code>padding</code> set on it. The problem is: the <code>padding</code> is applied only to the left (beginning) and right (ending) of the <code>&lt;span&gt;</code>, not the left (beginning) and right (ending) of each line when the text is wrapped on several lines.</p>
  
  <p>How can I apply the left and right <code>padding</code> to the <strong>middle</strong> lines?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;&lt;span&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt;&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>