How to apply background color with css to text with line break

[Michael_Knight]

Hi!
I would like to create a text background that is just behind the text even when the line breaks, like this:

I found a solution on stackoverlfow but I am not able to make it work in WeWeb:

How to apply background color with css to text with line break

Edit fiddle - JSFiddle - Code Playground

I copied the following code from stackoverflow to the custom CSS of my heading in Weweb:
background: #f00 none repeat scroll 0 0;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
color: #fff;
display: inline;
font-weight: 300;
line-height: 1.4;
margin-bottom: 10px;
padding: 0 45px;

But it again makes the background spread the whole textbox instead of seperating lines and stopping at the end of the last word of each line.

[Yaj]

Just tried it out this isn’t looking exactly like you want but just wanted to see if it’s possible so you’ll have to mess around with the settings a bit to get it like that but first

Get a div and make it a block

Add the first css to this element

Then put a text box inside this element like in the first photo and add that second bit of css to the text element

Should get you this result, I did mess around with other settings but I think as long as you do a div that is a block with some text inside it should work then just play around with the design to get the desired effect.

I made the width of the div fixed as well just so it works

Also i couldn’t see what I was typing when I done this which I wasn’t sure why but just be aware that you might have to copy and paste it or something

[Michael_Knight]

Thank you very much Yaj!!!
Thanks to you I could solve it!!!

What it solved for me was creating the div block and then placing the text component inside it, like you said.
On the div block I didn’t even need special css.

On the text component I added this css:

background: #f00 none repeat scroll 0 0;
box-decoration-break: clone;
display: inline;
padding: 0 16px;

I then increased the line-height of the text component to add space between the background color of each line.

This is the result

[Yaj]

Glad I could help!