Question

我有一个内联元素，其中包含换行符。它的四面都有衬垫。但是，断线处切割元素的边填充不存在。

这就是我的意思：

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

我希望最终结果如下所示： 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

<强>更新

此问题还有一个名为box-decoration-break的新css属性。它目前仅由歌剧支持，但希望很快more browsers will implement this。

希望这有帮助

Answer 2

为您找到一个解决方案，但它并不漂亮：）

由于您无法使用css定位<br>元素，因此您必须使用javascript。以下是使用jQuery实现所需功能的方法：

// Add two spaces before and after any <br /> tag $('br').replaceWith('  <br />  ');

使用 元素的数量来实现两端的填充。

这是一个更新的小提琴演示： 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 ，并将此属性用于此解决方案）添加到块中元件。然后我使用 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/

希望它能帮助任何人

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

5 个答案: