断行文本周围的空白

Question

以下是我的问题的小提琴：http://jsfiddle.net/hp61pthk/3/

代码是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想要实现的是在文本中间的两边都有一行标题。

如果您输入短文本它可以正常工作，但是当我在span中输入更长的文本时会正确地破坏该行，但其宽度保持为全长。这是正常行为吗？我怎么说能够跨度来确定宽度

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