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

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.