Lines of text with background colour sized to dimensions of text

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.



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;}
<p>Lorem ipsum dolor sit amet, consectetur <br />adipiscing elit. Donec eget <br />libero magna, <br />eget ultrices</p>