两排标题的填充 [英] Padding for two-lined headline

问题描述

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

That is a little bit hard to explain, if someone knows a better title for this, please go ahead and change it.

我想画一个黑盒子在我的标题后面。我这样做与h标签内的一个跨度。它需要在左边和右边一点点填充。

I want to draw a black box behind my headline. I'm doing this with a span inside the h-tag. It needs a little bit padding to the left and to the right. My layout is responsive, so it is likely that the heading breaks into two lines.

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

问题：填充只影响跨度的结束和开始。在标题被破坏的地方，字母接触框的边框。

The problem: The padding just affects the end and the beginning of the span. Where the heading is broken, the letter touch the border of the box.

我希望这是可以理解的。这里是小提琴。尝试使窗口变小并观察，锄头它的行为。

I hope this is understandable. Here is the fiddle. Try to make the window small and watch, hoe it behaves.

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

编辑：我希望它的形状像文本。正如你会用一个毡尖。

I want it to be shaped like the text. As you would mark it with a felt tip. But with padding for every line.

推荐答案

我最近发现了另一个解决方案。它几乎在每个浏览器（无IE8和下）工作，可以很容易地调整，看起来像这样：

I recently found another sollution. It works in almost every browser (No IE8 and down), is easily adjustable and looks like this:

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

这篇关于两排标题的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！