Padding for two-lined headline - css

Question

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.

Answer 1

I'm assuming you WANT it to split to "two dark lines" in that fashion? Because if you just want a black background to your titles, that DOES retain the padding, then this simplified version will work:
<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
}
Updated Fiddle: http://jsfiddle.net/kWgD2/

Answer 2

This is the closest I can get...really hacky, I think you'll need some JS myself :(
This via:
<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

What about using position:relative with a left adjustment? Prob not the best method if you're not doing the adjustments manually but at least it's a css-only solution?
Example -> http://jsfiddle.net/JnLje/358/
More info from thirtydot -> Add padding at the beginning and end of each line of text

Answer 4

you should set padding on h1 and/or set span as 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/ (padding h1)
.headline-black h1 {
color: #FFFFFF;
font-size: 22px;
padding:0 1em;
}

Answer 5

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