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>

Answer 2

来自here：

显示：内联块

内联块以内联方式放置（即与相邻内容位于同一行），但它的行为与块相同。

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

http://jsfiddle.net/DsqY2/

enter image description here source

Answer 3

试试这个

请在display:inline-block;班级

中写下span

http://jsfiddle.net/DsqY2/3/

 span {
    font-size: 25px;
    line-height: 28px;
    color: white;
    background-color: #2EC6C6;
    padding-right: 5px;
    padding-left: 5px;
    display:inline-block; /*-add--*/
}

Answer 4

嗯，如果您使用<div>代替<span>，请参阅here。

将填充应用于行尾html css

4 个答案: