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 is as follows (edited to show relevant rules)

h1 {
    color: #fff;
    line-height: 1.4;
    background: #41a293;
    padding: 2px 4px; 
    display:inline;
}

This produces the following result:

I get padding at the start of the element ('S'), and at the very end ('e'), but not where the text breaks. The break happens due to the width of it's parent DIV. This will happen often and is necessary.

Is there any way to ensure the element gets even padding at the points where the text breaks?

Many thanks Dave

EDIT - I should have also said that the text content will display via a CMS (Wordpress).

Answer 1

If you're okay with the effect only being visible in WebKit/Blink browsers, you should use

-webkit-box-decoration-break: clone;
box-decoration-break: clone;

Which does exactly what you want, like here: http://jsfiddle.net/Cnuzh/13/

Answer 2

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?

Answer 3

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