内联文本背景颜色，不分成单独的元素答案

【问题标题】：Inline text background color without dividing into separate elements内联文本背景颜色，不分成单独的元素
【发布时间】：2013-09-28 00:01:30
【问题描述】：

我想要多行文本，它们只是一个元素，有一个尊重背景填充的背景层。结果，我想要这个：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 解决方案？ (fiddle here)

标签： javascript html css

【解决方案1】：

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

【讨论】：