Question

我在div中有一个h2元素。 div是150px宽，但h2可能更宽，所以文本必须断开并转到下一行。问题是，即使文本中断，h2元素的背景颜色也没有，因此h2元素的背景颜色覆盖了整个div。

有没有办法让h2的背景色只出现在文字下面？

HTML ：

<div>
  <h2>This is a long text test</h2>
</div>

CSS ：

div {
  background-color: green;
  width: 150px;
  height: 150px;
  padding-top: 15px;
}

h2 {
  background-color: red;
}

Answer 1

将h2设置为display:inline，将line-height设置为1em，以确保每一行都与前一行无关。

div {
  background-color: green;
  width: 150px;
  height: 150px;
  padding-top: 15px;
}
h2 {
  background-color: red;
  display: inline;
  line-height: 1em;
}

<div>
  <h2>This is a long text test</h2>

</div>

Answer 2

我终于使用了这个技巧：http://css-tricks.com/multi-line-padded-text/

编辑：正如所建议的那样，诀窍是在div上设置一个padding-left，然后在跨度上创建一个:: after class，它将填充左边的空白区域（相同的背景颜色，没有文本）。

这样你就可以在多线范围内实现填充

打破h2元素的背景

2 个答案: