javascript - 带有换行符的内联元素没有边界填充

这些图片显示了一个标题元素，其中定义了display: inline以及padding: 0 15px:

如图所示，第一行上的left padding可见，但right padding不可见。换行后，情况相反。

我的问题是，当inline元素跨越多行时，是否有可能在两行(css技巧或javascript)上应用填充？

最佳答案

是的，可以使用 boxdecorationbreak:clone 做到这一点。

对boxdecorationbreak:clone;的支持非常好，对于IE，您可以使用
white-space:pre-wrap;

h1 {
        color: #fff;
        background-color: #B41E81;
        font-family: Arial;
        font-weight:100;
        display: inline;
        padding: 0 15px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        white-space:pre-wrap; /*IE*/
    }

检查支持

http://caniuse.com/#feat=css-boxdecorationbreak

来自MDN

空格:预包装



boxdecorationbreak :克隆



DEMO

h1 {
    color: #fff;
    background-color: #B41E81;
    font-family: Arial;
    font-weight:100;
    display: inline;
    padding: 0 15px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    white-space:pre-wrap; /*IE*/
}

<h1>Maximera effekten fore och effekt motet fore och effekt motet</h1>