Пробелы вокруг linebreaked текст

Question

Вот скрипку моей проблемы: http://jsfiddle.net/hp61pthk/3/

Код:

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; 
 
    }

<h2 class="nadpis"><span>Long heading long heading</span></h2> 
 
<h2 class="nadpis"><span>Short heading</span></h2>

, что я хочу добиться того, чтобы иметь заголовок с линиями на обе стороны в середине текста.

Если вы введете короткий текст, он будет работать, но когда я введу более длинный текст в прорези, строка будет правильно, но его ширина останется такой же, как и полная. Это нормальное поведение? Как я могу сказать, чтобы охватить иметь ширину точно

Answer 1

Мой вклад:

http://jsfiddle.net/hp61pthk/13/

h2.nadpis { 
    text-transform: uppercase; 
    text-align: center; 
    border-bottom: 1px solid #2C3E50; 
} 

h2.nadpis span { 
    background: #fff; 
    position: relative; 
    top: 0.5em; 
    padding-left: 15px; 
    padding-right: 15px; 
}