Padding for two-lined headline

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