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] = '<span class="subhead">' + headerContent[i] + '</span>';
        }

        $(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

Answer 2

if you add

white-space:pre-wrap;

to your h1 it will look like this :

Still trying to figure a way to add the space before the (i) !

EDIT : Check this out : http://jsfiddle.net/ahmad/6qVVD/10/

--Still need a way to wrap the last word with jQuery--

Wrapping the last word with a span using jQuery

$('h1').each(function(index, element) {
    var heading = $(element), word_array, last_word, first_part;

    word_array = heading.html().split(/\s+/); // split on spaces
    last_word = word_array.pop();             // pop the last word
    first_part = word_array.join(' ');        // rejoin the first words together

    heading.html([first_part, ' <span>', last_word, '</span>'].join(''));
});

Working example : http://jsfiddle.net/6qVVD/12/

As you see it's working perfectly

Answer 3

EDIT: nvm, didn't notice the white line; wouldn't giving & nbsp ; instead of regular spaces help?

give it an inline-block display, be sure to make it display:inline for ie7

regular

h1 { display:inline-block }

ie7 only

h1 { display:inline}

Answer 4

Inline elements do not support padding and margin well, so make it block or inline-block (which is not cross browser) Why are you making it inline btw?