CSS - 将填充应用于两行内联元素

Question

我必须创建一个样式来将背景颜色和填充应用于标题元素,从而产生以下预期外观(Photoshop模型):

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

我的CSS如下(编辑显示相关规则)

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

这会产生以下结果:

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

我在元素的开头('S')和最后('e')得到填充,但不是文本中断的地方.由于它的父DIV的宽度而发生中断.这种情况经常发生并且是必要的.

有没有办法确保元素在文本中断的点处得到均匀填充？

非常感谢戴夫

编辑 - 我也应该说文本内容将通过CMS(Wordpress)显示.

Answer 1

如果您对WebKit/Blink浏览器中仅显示效果感到满意,则应该使用

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

这正是你想要的,就像这里:http://jsfiddle.net/Cnuzh/13/

Answer 2

使用 jQuery 将 h1 中的每个单词包装到一个跨度中几乎可以达到目的。老实说，我不知道它如何影响搜索引擎优化。

当我需要实现这一目标时，这就是我正在使用的。

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

我想我实际上是从不久前 stackoverflow 上类似问题的答案中得到的。如果是这种情况，我会将链接发布到原作者。我明天会研究一下，但首先我需要一张温暖的床^^

希望有帮助，

王家