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

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;}

小提琴

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

但我找不到解决方案。请注意，此文本可以由客户端编辑，因此我不知道换行符在哪里。

Answer 1

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

这是小提琴

Answer 2

span默认情况下，元素不支持填充。

引用：“跨度是内联元素。默认情况下，您不能仅向内联元素的左右添加顶部或底部填充。您将需要 a) 使跨度显示：块或 b) 浮动跨度以便其固有显示:block 为此目的。”

Answer 3

只需使跨度充当块元素即可。

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;