Question

这有点难以解释，如果有人知道更好的标题，请继续改变它。

我想在标题后面画一个黑框。我在h-tag中使用span来做这件事。它需要在左侧和右侧稍微填充一点。我的布局是响应式的，因此标题可能会分为两行。

    <div class="headline-black">
        <h1 class="entry-title">
             <span>Some very, very long headline, that is very, very long.</span>
        </h1>
    </div>


h1 span {
    background: none repeat scroll 0 0 #000000;
    line-height:44px;
    padding:7px 25px 8px 25px;
}

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
}

问题：填充只影响跨度的结束和开始。如果标题被打破，则字母会触及框的边框。

我希望这是可以理解的。这是小提琴。试着让窗户变小，观察，锄头的行为。

http://jsfiddle.net/832u8/2/

编辑：我希望它的形状像文字一样。正如你用毡尖标记它。但是每行都有填充。

Answer 1

我假设你想以这种方式分裂成“两条黑线”？因为如果您只想要标题的黑色背景，那么保留填充，那么这个简化版本将起作用：

<h1 class="entry-title">Some very, very long headline, that is very, very long.</h1>

h1 {
  background: #000;
  line-height:33px;
  padding: 8px 25px;
  color: #fff
}

更新小提琴：http://jsfiddle.net/kWgD2/

Answer 2

这是我能得到的最接近的...真的很笨，我觉得你自己需要一些JS :(

通过：

<h1 class="entry-title"><span id="Title"><span>Some very, very long headline, that is very, very long.</span></span></h1>


#Title {
 border-left: 20px solid #000;
 display:block;
 color: #fff;
}

#Title:after {
 content:'';
 display:inline-block;
 width: 20px;
 background: #000;
}

#Title span {
 background: #000;
 padding-right: 20px;
 direction: rtl;
}

http://jsfiddle.net/8EDPN/

Answer 3

左侧调整使用position:relative怎么样？如果你没有手动进行调整，那么问题不是最好的方法，但至少它只是一个css解决方案吗？

示例 - ＆gt; http://jsfiddle.net/JnLje/358/

来自thirtydot的更多信息 - ＆gt; Add padding at the beginning and end of each line of text

Answer 4

你应该在h1上设置填充和/或将span设置为inline-block http://jsfiddle.net/832u8/9/ （span inline-block）

 h1 span {
        background: none repeat scroll 0 0 #000000;
        line-height:44px;
        padding:7px 25px 8px 25px;
        display:inline-block;
    }

http://jsfiddle.net/832u8/3/ （填充h1）

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
padding:0 1em;
}

Answer 5

我最近找到了another sollution。它几乎适用于所有浏览器（无IE8及以下），可轻松调整，如下所示：

HTML

<h1>
    <span class="wrap">
        <span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
    </span>
</h1>

CSS

h1 {
    color:#fff;
}

.wrap {
    box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}

.inner {
    background: #000;
    position:relative;
}

用于双线标题的填充物

5 个答案: