换行文本周围的空格答案

【问题标题】：Whitespace around linebreaked text换行文本周围的空格
【发布时间】：2015-03-05 15:40:11
【问题描述】：

这是我的问题所在：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>

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

如果您输入短文本，它可以工作，但是当我在 span 中输入较长的文本时，它会正确断行，但它的宽度仍然是全长。这是正常行为吗？我怎么能说跨度正好有宽度

【问题讨论】：

没明白你...你想达到什么目的？？？
运行 sn-p 并且不要展开到整页。我认为 OP 希望在文本开始换行时看到标题两侧的行，但事实并非如此。
是的，饥饿之星是对的。您必须缩小页面，以便长标题分成两行。然后你会发现跨度不像文本那么宽。
真的吗？没有人知道这个的解决方案吗？所以看起来这是一种正常的行为。 =(

标签： html css line-breaks

【解决方案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;
}

【讨论】：