带换行符的内联元素上的 XHTML/CSS 填充

Question

我有一个内联元素，其中有一个换行符。它的四面都有填充物。但是，换行符切割元素的侧边填充不存在。

这就是我的意思:

http://jsfiddle.net/4Gs2E/

tag 右侧和with 左侧应该有 20px 的填充，但没有。我能看到这个工作的唯一其他方法是，如果我为每一行创建一个新元素，但这个内容将动态生成，并且不会在固定宽度的容器中，所以我看不到这个工作。有没有其他方法可以在没有任何 javascript 的情况下在 css 中执行此操作？

我希望最终结果看起来像这样: http://jsfiddle.net/GNsw3/

但没有任何额外的元素

我还需要它来处理内联显示，因为我希望背景环绕文本，因为内联 block 不会这样做

这可能吗？

编辑、更改示例以使我想要的内容更加明显:

当前 http://jsfiddle.net/4Gs2E/2/

我希望它看起来像什么 http://jsfiddle.net/GNsw3/1/

Answer 1

在某些情况下，您可以使用 box-shadow 作为解决方法。

将元素的左右 padding 移动到其父级并添加两个 box-shadow。

结果:http://jsfiddle.net/FpLCt/1/

浏览器对 box-shadow 的支持:http://caniuse.com/css-boxshadow

更新:

这个问题还有一个名为 box-decoration-break 的新 css 属性。 .目前只有opera支持，但希望more browsers will implement this很快。

希望对你有帮助