Question

我试图获得＆＃34;填充＆＃34;使用以下css在一个跨度中的可变长度的行。我们不知道这些线的内容是什么。

你可以在这里看到效果：

＆＃13;

#container{
  width:300px;
  margin:0 auto;
  background-color:#ccc;
  height:100px;
  padding:20px;
}

.text{
  max-width:250px;
}

span{
  max-width:250px;
  background-color: #FF8E1B;
  box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  -moz-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  -webkit-box-shadow: 10px 0 0 #FF8E1B,-10px 0 0 #FF8E1B;
  display: inline;
  padding: 1px 0;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: .28px;
  font-weight: 100;
  color:#fff;
}

＆＃13;

<div id="container">
  <div class="text">
    <span>
      Hello World Hello World Hello World
      Hello World Hello World Hello<br>
      Hello World Hello World Hello World
    </span>
  </div>
</div>

＆＃13;

在Firefox中（仅在42中测试），它仅将box-shadow应用于第一行和最后一行。在每个其他浏览器中，它将box-shadow应用于每一行。

1）这是Firefox中的错误吗？我应该向Mozilla提交错误报告吗？

2）有没有办法解决这种或其他方式来获得给定限制的效果？

Answer 1

this question上的答案回答了我的问题的第2部分，对于任何寻找这个问题的解决方案的人。这些css行是必需的：

  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;

Answer 2

我不认为这是一个错误。不同的浏览器以不同的方式显示填充和边距，这可能是Mozilla感觉最好的方式。如果您希望它与Chrome一致，您可以像这样添加每行的范围

<span>Hello World Hello World Hello World</span>
<span>Hello World Hello World Hello<br></span>
<span>Hello World Hello World Hello World</span>

Answer 3

Firefox正确执行，因为您只有一个 <span></span>。在codepen的编辑器（或其他任何内容）中，任何数量的文本行都将被视为一个长行（即使添加了<br>或类似内容，如您的示例中所示）。因此，该行开头/结尾的盒子阴影是唯一正确的输出。华丽世纪为FF。

BTW：IE11，CH和FF都使用webkit（无论如何），其中FF是最符合W3C标准的。

Firefox box-shadow表现不同

3 个答案: