1

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

<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。

这是一个小提琴

4

4 回答 4

4

您可以尝试使用 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>

于 2014-10-31T14:34:49.237 回答
2

从这里：

显示：内联块

内联块被内联放置（即与相邻内容在同一行），但它的行为类似于块。

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/

在此处输入图像描述 资源

于 2013-08-02T13:18:24.233 回答
0

尝试这个

请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--*/
}
于 2013-08-02T13:19:26.527 回答
-1

好吧，它有效，如果您使用<div>而不是<span>，请参见此处。

于 2013-08-02T13:20:42.643 回答