CSS span padding & background in h1

I'm using an H1 tag for title text and a SPAN tag inside it in order to add background color and padding, as per example:

example here

The problem is when the text overflows onto another line, the SPAN element padding does not effect the text on the other line/s.

Any one have any ideas about how to fix please? (i have looked at/tried the other examples here but ran into issues when using the 'border-left' technique - renders differently across ALL browsers.) Is there a way using jquery? Cheers, S.

开发者_如何学JAVA

EDIT:

Think I've managed to get this working ok - see http://jsfiddle.net/xqd87/124/

---

Based on your comment, the best I can do is add white-space:pre-wrap; to .bg-box. This gives you the desired space to the right of line ends but unfortunately doesn't add space to the left of a new line.

Example

---

just add display: block; to .box-bg: http://jsfiddle.net/xqd87/87/

at least, i don't understand why you're needing the span - the same thing can be achived just like this: http://jsfiddle.net/xqd87/88/

---

Padding of inline elements will add space in the start and the end of the text inside element. If you want to add padding of the block element, make it display:block

---

write display:block in your span tag because span is an inline element which not add vertical padding in there width.

That's why the next line not considered his padding

---

I got it finally.

Here is my solution: http://jsfiddle.net/AAyNq/

The word-spacing is controlled by the negative text-indent. The jQuery will take care of the first word of the scentence (see the padding-left in the jQuery)