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

Question

I want to have multiple lines of text, which are just one element, to have a background layer which respects the background-padding. As a result, I want to have this: http://d.pr/i/ImRS

What I get is either http://jsfiddle.net/bqfk2/ or http://jsfiddle.net/Jmk4D/2/ (the latter is from this question ) which is both not what I want: first example got no left/right paddings at the beginning and end of lines, second example requires multiple elements.

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

I would also accept a solution which would divide the text into multiple elements which still correspond to the original text line breaks (respecting every font). The goal should be not to let the user divide the text into parts and still have this effect.

Answer 1

Try 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