如何在跨度中的每个换行符上添加左右填充

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

我想在每一行上左右添加填充。喜欢这张图片

但我找不到解决方案。请注意，客户可以编辑此文本，因此我不知道换行符的位置。

Answer 1

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

以下是fiddle

Answer 2

span元素默认不支持填充。

引用：“spans是内联元素。默认情况下，你不能只在左右两侧添加内部元素的顶部或底部填充。你需要a）使span显示：block或b）浮动span，以便它的内容显示：为此目的阻止。“

Answer 3

只需将span作为块元素。

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

编辑 JavaScript解决方案。将跨度的内容分成多个跨度。

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