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

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:

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.

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

image

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

1 Like

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

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 :slight_smile:

1 Like

Glad I could help!