title: Whitespace around linebreaked text
body: <p>Here is the fiddle of my problem: <a href="http://jsfiddle.net/hp61pthk/3/" rel="nofollow">http://jsfiddle.net/hp61pthk/3/</a></p>
  
  <p>The code is:</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>    h2.nadpis {
        text-transform: uppercase;
        text-align: center;
        position: relative;
        font-size: 2.5em;
      }
      h2.nadpis:after {
        display: block;
        content: '';
        height: 0;
        border-top: 1px solid #2C3E50;
        top: 50%;
        width: 100%;
        position: absolute;
        z-index: 1;
      }
      h2.nadpis span {
        background: #fff;
        z-index: 2;
        position: relative;
        padding: 0 15px;
        display: inline-block;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h2 class="nadpis"&gt;&lt;span&gt;Long heading long heading&lt;/span&gt;&lt;/h2&gt;
  &lt;h2 class="nadpis"&gt;&lt;span&gt;Short heading&lt;/span&gt;&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what i want to achieve is to have a heading with lines on both sides in the middle of text.</p>
  
  <p>If you enter short text it works, but when i enter longer text in span breaks the line correctly but its width remains as it was full-length. Is this a normal behaviour? How can i say to span to have the width exactly</p>