How to include padding on a span element that has multiple lines - html

Question

jsfiddle here.
I have a span element that is highlighted using background-color: yellow and padding: 1px 10px.
However, on smaller devices, this line of text becomes two lines, three lines, etc. This causes the first and second lines to 'lose' the padding on the right side, such as the words "the" and "to", and the second and third lines to 'lose' the padding on the left side, such as the words "highlight" and "better" in the picture below:
How can I ensure these words (in the picture above, "the", "highlight", "to", "better") and all other words keep this 10px padding on the left and right side?
Someone in response to a similar question suggested using display: block, but this makes the span no longer a span, just a rectangle and that is not how I need it to look. It also makes the highlight span the entire width of the page.

Answer 1

Use the box-decoration-break CSS.
span {
background-color:yellow;
padding:1px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break:clone;
}
This applies the styles to every box fragment in your span.

Answer 2

You can try faking the background when the span is broken by using box-shadow. Try something like this and see if it works for you:
span {
background-color: yellow;
padding: 1px 0;
box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow;
}
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisi ipsum. Mauris convallis dapibus diam ac sollicitudin. Vivamus varius nulla magna, ac rutrum nulla accumsan quis. Duis placerat, elit non posuere elementum, tellus massa pellentesque nunc, eu maximus ligula metus non dui. Sed accumsan quam nec sodales sagittis.</span>

Answer 3

To include as much as possible browsers , you could relay on position:relative and use 2 inline tag inbricated to mimick the desired result.
mind that some margins or padding should be considerate to keep inbound the translated element via position.
example to show the idea
p {/* make the text wrap*/
width:15em;
margin:2em;
}
span {
background:yellow;
/* increase line height for better reading : optionnal*/
line-height:1.35em;
padding: 0.25em 0;
}
span span {
/* move child 1em to left to fake padding */
position:relative;
left:1em;/* value of your left alike padding*/
}
/* eventually on the last line ? */
span span:after {
content:'';
padding:0.25em;
}
<p>
<span>
<span>This sentence <del> has some padding</del> to make the highlight appear thicker. These are more words to better explain.
</span>
</span>
</p>
https://jsfiddle.net/ynh35sL5/3/
This is not the best , extra HTML for styling ... spans are neutral :(

Answer 4

just wrap it in a container div and put the horizontal padding on that element since that's what you actually want:
<div class="span-container><span>my text</span></div>
.span-container { padding: 0 10px; }
.span-container span { background-color: yellow; padding: 1px 0; }
here's a fiddle demonstrating that this achieves exactly what you want without work arounds that don't work in every browser: https://jsfiddle.net/xg1bkgmn/
span is an inline element, it makes sense to use it for your case of highlighting only the text and widening the lines. However, to keep the entire thing padded, it needs a block element container, this is standard practice.
Why go with more complicated CSS when the solution is this simple?