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

Question

我有一个内联元素，其中有一个换行符。它的所有侧面都有衬垫。但是，换行符切割元素处的侧边距不存在。

这就是我的意思：

http://jsfiddle.net/4Gs2E/

右侧应该有 20px 填充标签的左侧和with的左侧，但没有。 我可以看到此工作的唯一其他方法是，如果我为每一行创建一个新元素，但此内容将动态生成，并且不会位于固定宽度的容器中，因此我看不到该工作。有没有其他方法可以在 css 中做到这一点而不需要任何 javascript？

我希望最终结果如下所示： http://jsfiddle.net/GNsw3/

但没有任何额外的元素

我也需要它与显示内联一起使用仅当我希望背景环绕文本时，内联块不会执行此操作

这可能吗？

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

当前 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

更新：

还有一个新的 css此问题的属性称为 box-decoration-break。目前只有 Opera 支持，但希望更多浏览器能够实现此< /a> 很快。

希望这有帮助

Answer 2

为您找到了一个解决方案，但它并不漂亮:)

由于您无法使用 css 定位
元素，因此您必须使用 javascript。以下是如何使用 jQuery 完成您想要的事情：


// 在任何
之前和之后添加两个空格标签
$('br').replaceWith('  
>  ');


调整   元素的数量以实现两端的填充。

这是更新的 Fiddle 演示：
http://jsfiddle.net/4Gs2E/8/

Answer 3

也许您可以使用 float: left 而不是 display: inline：

http://jsfiddle.net/GolezTrol/4Gs2E/1/

Answer 4

通常这是通过将每个单词包装在一个自己的有边框的 SPAN 中来实现的。

Answer 5

我只是想为自己制作 CSS 动画菜单。我发现的解决方法是将您的 INLINE-BLOCK 元素（如有必要，在 css 中进行更改，出于此解决方案的目的，将其称为具有此类属性的 span）到 block元素。然后我使用 span 的边距，因为它是周围 div 的填充。

div.menuopt {
    margin: 10px;
    padding: 0px;
    padding-left: 0px;
    overflow: hidden;
    width: 500px;
    height: 150px;
    background: grey;
}
span.menuopt {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    margin-left: 150px;
    margin-top: 10px;
    font-size: 25px;
}

例子：
http://jsfiddle.net/ApbQS/

希望它能帮助任何人