Html 仅为文本长度添加背景色

我确实研究了这个问题，找到了多种解决方案，但由于某种原因，我无法让这些解决方案为我工作

问题是： 我试图为多行文本块中的每一行提供颜色背景

我遇到的问题是…我把这个文本（h2）嵌套在一个span标记（用类设置）中，但是整个块都高亮显示，而不是单独的文本行。我只希望颜色延伸到文本的末尾，而不是整个文本块

我已经包括了我的HTML和CSS。我不知道我做错了什么。下面是我想做的一个例子：

HTML:

---

问题是

float:left

应用于span。它使它的行为像块。如果删除该选项（并选择更可见的颜色），您将看到该选项仅为线条添加背景色

小提琴：

它确实会对文本的缩进造成一点混乱，但我认为你可以通过在h2上添加适当的填充，而不是在跨度上添加边距来解决这个问题

提琴：

所以基本上，你可以把定位部分移到h2。或者大多数属性实际上，尽管字体和行高在哪里并不重要。背景的跨度如下：

h2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  line-height: 1.5;
  margin-left: 50px;
  margin-top: 200px;
  position: relative;
}

h2 > .lyrics {
  background: rgba(0,0,0,0.3);
}

Fiddle在更新的最小代码示例中将其结合在一起：

---

将余量放在h2元件上，将其从量距元件上拆下，并拆下相对位置和浮子

h2 {
margin-left: 50px;
margin-top: 200px;
}

h2 > .lyrics {
background: rgba(0,0,0,0.3);
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
}

---

请去掉你的HTML和CSS来创建一个最小的例子。是的……我确实做了彻底的研究。我被卡住了，我不知道我错在哪里。我没有说你没有，但是如果你把css简化到一个最小的例子，你甚至可能把它缩小到你自己会发现的程度。从一把带有跨度的小提琴开始，添加背景色。它会起作用的。然后一次添加一个其他属性。在某一点上，它会破裂，你会发现问题所在。即使你找不到它，一个较小的例子也会让别人更容易帮助你。

marginleft:50px和
页边距顶部：200px没有浮动就不能工作：左
？是的，我已经提到过了。添加了一个提琴来提供解决方案。非常非常有用。我感谢你的帮助。我的元素现在有点不正常了，但我会继续玩下去，看看我能做些什么。
h2 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  line-height: 1.5;
  margin-left: 50px;
  margin-top: 200px;
  position: relative;
}

h2 > .lyrics {
  background: rgba(0,0,0,0.3);
}

h2 {
margin-left: 50px;
margin-top: 200px;
}

h2 > .lyrics {
background: rgba(0,0,0,0.3);
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
line-height: 1.5;
}