标题背后的颜色<h1>带有换行符的填充

Question

我想给<h1>一个背景颜色，并希望它与文本一起扩展，左右相等的填充。

在单线上似乎没问题但是当我打破一条线时，填充物搞砸了。

这是我的代码：

h1 span {
  background: red;
  color: #fff;
  padding: 0 20px;
}

<h1><span>Lorem Ipsum Doler Sai Bongaro</span></h1>
<h1><span>Lorem Ipsum <br>Doler Sai Bongaro</span></h1>

我希望在第二个<h1>

之后，在嘴唇和doler之前的空间

它看起来不应该像一个盒子......

所以看起来像这样：

Answer 1

您应该像这样更改HTML：

让我知道是否有帮助

＆＃13;

＆＃13;

h1  span{
  background: red;
  color: #fff;
  padding: 0 20px;
  display:inline-block; /*optional */
}

＆＃13;

<h1><span>Lorem Ipsum Doler Sai Bongaro</span></h1>
<h1><span>Lorem Ipsum </span><br /><span>Doler Sai Bongaro</span></h1>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用box-decoration-break（在Firefox中为currently supported），并且在Chrome，Safari和Opera中具有前缀支持。这样，您只需要一个<span>元素。

h1  span{
  background: red;
  color: #fff;
  padding: 0 20px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<h1><span>Lorem Ipsum <br />Doler Sai Bongaro</span></h1>

Answer 3

你只需要添加display：inline-block to span in h1

h1 span {
  background: red;
  color: #fff;
  padding: 0 20px;
  display: inline-block;
}