How to add padding-left and right on each line break in the span

Question

HTML

<h1><span>Lorem ipsum<br>dolor si amet<br>etc etc etc</span></h1> 

CSS

 h1{color:#fff;line-height:48px;} h1 span{background:#000; color:#fff; padding:5px 10px;} 

Fiddle

I would like to add padding left and right on each row. Like this image

but I can not find a solution. Please note that this text can be edited by the client, so I don’t know where the line break will be.

Answer 1

 <h1> <span>Lorem ipsum</span><br/> <span>dolor si amet</span><br/> <span>etc etc etc</span> </h1> 

Here is the fiddle

Answer 2

Element

span does not support padding by default.

Quote: “Spans are inline elements. By default, you cannot add an upper or lower addition to an inline element only left and right. You need to either: a) render the range display: block or b) float the span so that it is inherent in the display: unit for this purpose. "

Answer 3

Just make the span valid as a block element.

 h1 span{display: block; background:#000; color:#fff; padding:5px 10px;} 

to change . JavaScript solution. Divide the contents of the range into several intervals.

 var span = document.getElementById("txt"); var newSpans = "<span>" + span.innerHTML.replace(/<br\s*[\/]?>/g, "</span><br /><span>") + "</span>"; span.parentNode.innerHTML = newSpans;