CSS - apply padding to inline element across two lines

Question

I have to create a style to apply a background color and padding to a header element, resulting the following intended appearance (Photoshop mock-up):

My CSS

Answer 1

Using jQuery to wrap every word inside your h1 into a span will pretty much do the trick. I have no clue how it affects SEO though to be honest.

This is what i'm using when i need to achieve this.

$("h1").each(function() 
    {
        var headerContent = $(this).text().split(' ');

        for (var i = 1; i < headerContent.length; i++) 
        {
            headerContent[i] = '' + headerContent[i] + '';
        }

        $(this).html(headerContent.join(' '));
    }
);

http://jsfiddle.net/Cnuzh/

I think i actually got this from an answer from a similar question here on stackoverflow a while back. I'll post the link to the original author if this is the case. I shall look into it tomorrow, but first i need my nice warm bed ^^

Hope it helped,

WJ