apply padding to inline element across two lines

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):

http://f.cl.ly/items/1h09010w1t1I1B1q0r43/Screen%20Shot%202011-08-27%20at%2014.49.48.png

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:

http://f.cl.ly/items/3b3V0M0A0c262Z3m3k3D/Screen%20Shot%202011-08-27%20at%2014.52.24.png

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).

---

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

---

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/

---

内联元素不支持填充和边距，因此使它成为块或内联块（这不是跨浏览器）为什么你要内联btw？

链接地址: http://www.djcxy.com/p/41414.html

上一篇: 通过foreignkey字段排序对象，而不是外键计数

下一篇: 将填充应用于跨两行的内联元素