用于双线标题的填充物(Padding for two

用于双线标题的填充物(Padding for two-lined headline)

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

我想在标题后面画一个黑盒子。 我在h-tag内部执行此操作。 它需要在左侧和右侧稍微填充一点。 我的布局是响应性的，因此标题可能会分为两行。

<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/

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

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

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/

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