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

jsfiddle here.

i have span element highlighted using background-color: yellow , padding: 1px 10px.

however, on smaller devices, line of text becomes 2 lines, 3 lines, etc. causes first , second lines 'lose' padding on right side, such words "the" , "to", , second , third lines 'lose' padding on left side, such words "highlight" , "better" in picture below:

how can ensure these words (in picture above, "the", "highlight", "to", "better") and other words keep 10px padding on left , right side?

someone in response similar question suggested using display: block, makes span no longer span, rectangle , not how need look. makes highlight span entire width of page.

you can try faking background when span broken using box-shadow. try , see if works you:

span {     background-color: yellow;     padding: 1px 0;     box-shadow: 10px 0 0 0 yellow, -10px 0 0 0 yellow; }