Firefox 中带背景色的多行标题

Question

所以我想要一个带有背景颜色和行与行之间的间隙的多行标题。我在 Chrome/Safari/IE9+ 中使用一些 css hack 让它工作，但 Firefox 拒绝正确显示它。在新行的开头，span 元素应该有一个左边框。 FF 确实显示边框，但缺少 background-color。

我知道，h1/span 里面的 <br> 有点难看，但我需要换行符可以调整，多个 h1 标签更糟糕恕我直言。

谢谢！

Answer 1

像这样改变。

h1 span {
  box-shadow: 17px 0 0 #000, 0px 0 0 #000;
  background-color: #000;
}

我想它会对你有所帮助。

Answer 2

试试这个

<h1>
    <span>supertest<br></span>
      <span>  headline with<br></span>
      <span>  a lot of words</span>
</h1>

我猜它可以工作

如果您真的认为上面的代码对您有用，请尝试使用 br 标签。

html

<h1>
 <div>
    <span>
        supertest
        headline with
        a lot of words
        </span>
 </div>
</h1>

css

h1 span {
    box-shadow: 17px 0 0 #000;
    background-color: #000;
}
div{
    width:200px;
}

Answer 3

负框阴影值导致此问题。你可以简单地避免这个问题改变这个属性 -

box-shadow: 17px 0 0 #000, 0px 0 0 #000;

Answer 4

现代浏览器有一个名为 "box-decoration-break" 的属性。所以你的代码应该是这样的：

CSS

box-decoration-break: clone;

Support 用于内联元素还可以，但不是压倒性的。

Multiline headline w/ background color in Firefox