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

Question

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

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

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

这会产生以下结果:

我在元素的开头 ('S') 和最后 ('e') 进行了填充，但没有在文本中断的地方进行填充。中断是由于其父 DIV 的宽度而发生的。这将经常发生并且是必要的。

有什么方法可以确保元素在文本断开的地方得到均匀的填充？

非常感谢戴夫

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

Answer 1

如果您认为效果只在 WebKit/Blink 浏览器中可见，您应该使用

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

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