我想要多行文本(仅是一个元素),并具有一个尊重背景填充的背景层。结果,我想要这个:http://d.pr/i/ImRS

我得到的不是http://jsfiddle.net/bqfk2/http://jsfiddle.net/Jmk4D/2/(后者来自this question),两者都不是我想要的:第一个示例在行的开头和结尾没有左/右填充,第二个示例需要多个元素。

<div>
    <p>desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<style>
div {
    font-size: 2em;
    background: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    width: 300px;
}

div > p {
    background: yellow;
    display: inline;
    line-height: 1.4em;
}
</style>


我还将接受一个解决方案,将文本分为多个元素,这些元素仍然对应于原始文本换行符(尊重每种字体)。目标不应是让用户将文本分成几部分,而仍然具有这种效果。

最佳答案

尝试Box-shadow,

div {
    font-size: 2em;
    background: #fff;
    border: 1px solid #ccc;
    padding: 1em;
    width: 300px;
}
div > p {
    background: yellow;
    display: inline;
    line-height: 1.4em;
    box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
    -moz-box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
    -webkit-box-shadow:0.5em 0 0 #ff0, -0.5em 0 0 #ff0;
}


Source

Working Fiddle

07-24 09:46
查看更多