Цвет текста встроенного текста без разделения на отдельные элементы

Question

Я хочу иметь несколько строк текста, которые являются всего лишь одним элементом, чтобы иметь фоновый слой, который уважает фоновое дополнение. В результате, я хочу, чтобы это: 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> 

Я хотел бы также принять решение, которое бы разделить текст на несколько элементов, которые по-прежнему соответствуют оригинальным брейкам текстовых строк (уважая каждый шрифт). Цель должна заключаться не в том, чтобы позволить пользователю разделить текст на части и все еще иметь этот эффект.

Answer 1

Попробуйте Box-тень,

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