如何突出显示背景颜色的线条并在每一行上填充?

I am using php to output and exerpt inside a p tag.

I am then wrapping the inside string of the p tag with a span.

<p class="lead"><span><?php the_advanced_excerpt(); ?></span></p>

The outputted html...

<p class="lead"><span>Motorcycle helmet Full face or open face. A motocross or enduro style helmet is a better choice. These are specifically designed for off-road use and have particular…</span></p>

The span then has this css on it...

.carousel-caption .lead span {
    background: #F60;
    padding: 5px;
}

Please see the out come here...

enter image description here


See the green arrows - where it looks as desired.
See the red arrows - where padding is missing.

As you can see the orange high lighted lines are flush at the end of each line. Apart from the beginning and the end of the string.

So my question is how can I add left/right padding to each of the lines?

So it appears that each line has been highlighted with a background colour. Like plastic tape that you get embossed letters on.

Is this posible somehow?

Add "display: block" or "display:inline-block" to span's class

Unfortunately I do not think it is possible, and this is why:

span is always inline like this, so padding adds an extra 5px on the top, bottom, left, and right. Now your middle lines are not the beginning or the end because they are one line, so padding does not read for them.

You can set a background with display:block but you want a "highlighted" effect, which is not what display:block will give