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.