将填充应用于跨两行的内联元素
我必须创建一个样式来将背景颜色和填充应用于标题元素，从而产生以下预期外观（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）显示。
使用jQuery将h1中的每个单词都包含进一个跨度中几乎可以做到。 尽管说实话，我不知道它是如何影响SEO的。
这是我在使用时需要实现的目的。
$("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/
我想我实际上是从一个类似的问题的回答中得到了这个回复。 如果是这种情况，我会将链接发布给原作者。 我会在明天看到它，但首先我需要一个温暖的床
希望它有帮助，
WJ
如果您只在WebKit / Blink浏览器中可见，您应该使用
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
这正是你想要的，就像这里：http://jsfiddle.net/Cnuzh/13/
内联元素不支持填充和边距，因此使它成为块或内联块（这不是跨浏览器）为什么你要内联btw？
链接地址: http://www.djcxy.com/p/41413.html