title: How to add padding-left and right on each line break in a span
body: <p>HTML</p>
  
  <pre><code>&lt;h1&gt;&lt;span&gt;Lorem ipsum&lt;br&gt;dolor si amet&lt;br&gt;etc etc etc&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>h1{color:#fff;line-height:48px;}
  h1 span{background:#000; color:#fff; padding:5px 10px;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2HdW2/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>I would like to add padding left and right on each line. Like this picture</p>
  
  <p><img src="https://i.stack.imgur.com/qNqWE.jpg" alt="enter image description here"></p>
  
  <p>but I can't find a solution. Note that this text can be edited by the client so I don't know where the line break will be.</p>