空白周圍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; 
}