Javascript 内联文本背景色，不分为单独的元素

我想有多行文字，这只是一个元素，有一个背景层，其中尊重背景填充。因此，我希望：

我得到的是非此即彼的或（后者来自），这两者都不是我想要的：第一个示例在行首和行尾没有左/右填充，第二个示例需要多个元素

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

桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

div{
字号：2em；
背景：#fff；
边框：1px实心#ccc；
填充：1em；
宽度：300px；
}
div>p{
背景：黄色；
显示：内联；
线高：1.4em；
}

我也会接受一种解决方案，将文本分成多个元素，这些元素仍然与原始文本换行符相对应（关于每个字体）。我们的目标不应该是让用户将文本分成若干部分，并且仍然具有这种效果。

试试方框阴影

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;
}

---

您可以发布一个要呈现的标记示例吗？您可以使用上面代码框中的代码。由于您链接到了另一个问题，您是否尝试过解决方案？()