html - 如何在行尾应用填充？

Question

我的问题是我想放这样的东西

<span>CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT NULLA FACILISIS AT VERO EROS ET ACCUMSAN ET IUSTO ODIO DIGNISSIM QUI BLANDIT PRAESENT LUPTATUM ZZRIL DELENIT AUGUE DUIS DOLORE TE FEUGAIT NULLA FACILISI.</span>

像这样使用 CSS

span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
}

以百分比大小的 div。当换行时，我希望每一行都在左右两侧应用填充。目前它只应用于整个句子的开头和结尾。

我知道我可以将每一行放在单独的跨度中，但我希望它是动态的，这样我就可以写很多行并且它是适用的。

有什么建议吗？更喜欢纯 CSS，但愿意转向 javascript。

这是一个Fiddle

Answer 1

你可以尝试使用 box-decoration-break: clone for webkit/firefox 和 white-space: pre-wrap for ie

header {
    position: relative;
    margin: 10px;
    width: 300px;
}
header:before {
    content: '';
    position: absolute;
    height: 100%;
    right: 100%;
    width: 12px;
    background: gray;
    background: rgba(0,0,0,.3);
}

h1 {
    display: inline;
    padding: 8px 12px 8px 0;
    font-size: 30px;
    line-height: 49px;
    background: rgba(0,0,0,.3);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* add browser-class to html with modernizr or js */
.ie h1 {
    white-space: pre-wrap;
}
.ff h1 {
    padding: 7px 12px 7px 0;
}

<header>
    <h1>Lorem ipsum dolor, sit amet consectetuer</h1>
</header>