Lines of text with background colour sized to dimensions of text

HTML & CSS
1

Hi there,

I came across a tutorial some time ago which discussed the effect of having lines of text with a background colour which was automatically sized to the text content itself. Annoyingly I can’t find that tutorial again but I was hoping someone on here would be able to help me.

Instead of simply having a background colour on a block of text I would like the background to be sized to the length of the text and to automatically resize for each line. Please see the attached image for demonstration.

Cheers,

Shoxt3r

2

Managed to play around with some css and came up with the following, though p being an inline isn’t ideal and with all the <br />'s it isn’t exactly dynamic…


<style type="text/css">
p{display: inline; background: #e4e4e4;}
</style>
<p>Lorem ipsum dolor sit amet, consectetur <br />adipiscing elit. Donec eget <br />libero magna, <br />eget ultrices</p>