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

Question

图片显示了定义display: inline的标题元素以及padding: 0 15px：

如图所示，第一行的left padding是可见的，但不是right padding。在换行之后，情况正好相反。

我的问题是，如果内联元素跨越多行，是否可以在两行（css技巧或javascript）上应用填充？

Answer 1

这是一个旧的化妆品问题，但幸运的是，现在它实际上可以使用新属性box-decoration-break轻松解决。除IE之外，主要供应商已经supported（在这种情况下优雅降级）。

h1 {
    color: #fff;
    background-color: #B41E81;
    font-family: Arial;
    display: inline;
    padding: 0 20px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

<h1>Maximera effekten fore och efter motet retul beternium</h1>

Answer 2

是的，你可以使用 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

white-space：预先包装

  

预包装保留空白序列。线被破坏了    换行符，位于<br>，并根据需要填充换行符。

boxdecorationbreak ：克隆

  

每个框片段都使用指定的独立渲染   边界，填充和边距包裹每个片段。边界半径，   border-image和box-shadow应用于每个片段   独立。在每个片段中独立绘制背景   这意味着背景图像背景重复：不重复   可能会重复多次。

的 DEMO

＆＃13;

＆＃13;

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*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;