Is there anyone who can help?
I have to make some kind of quote, with a marker behind it.
What doesn’t work is that if the text ‘breaks’ the border radius goes around each paragraph of the text.
I have tried everything via codepen. But unfortunately nothing works yet.
You can go to the codepen via the link. Here you can see what it should be. ONLY that border radius may not be interrupted. Everything must be round. There should be no corners, as there are now
If anyone can help please?
p span {
padding: 7px;
line-height: 35px;
background-color: green;
color: #ffffff;
border-radius: 50px;
}<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae congue mauris rhoncus aenean vel elit scelerisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae congue mauris rhoncus aenean vel elit scelerisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae congue mauris rhoncus aenean vel elit scelerisque cmauris </span></p>>Solution :
The box-decoration-break:clone is built for this. Note that you would need the -webkit prefix for many major broswers.
p span {
padding: 7px;
line-height: 35px;
background-color: green;
color: #ffffff;
border-radius: 50px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae congue mauris rhoncus aenean vel elit scelerisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae congue mauris rhoncus aenean vel elit scelerisque Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae congue mauris rhoncus aenean vel elit scelerisque cmauris </span></p>