Firefox内联元素的分词

Question

我试图更改某些内联元素的word-break属性，如<span>和<a>，以获得更好的页面内容流。

看上去，火狐只对显示为块(如<div>)的元素识别单词以外的属性，而Chrome则遵守打破单词的请求。

在下面的示例中，红色和蓝色部分在Chrome中呈现相同( xxxxx被分成几行)。在Firefox中，红色框中的xxxxx溢出。

​

<div style="width:200px;background:red;">
  Hello <span style="word-break:break-all;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

<div style="width:200px;background:blue;word-break:break-all;">
  Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

​

上面的例子：https://jsfiddle.net/7scx4hfq/

哪个浏览器的行为正确？它是火狐bug还是Chrome bug？

更重要的是，如何在所有浏览器中实现预期的效果？

Note，将word-break:break-all设置为块级不是一个选项。

Answer 1

您可以尝试为火狐添加额外的word-wrap: break-word;。

span {
  word-break: break-all; /* for others */
  word-wrap: break-word;  /* for Firefox */
}

如果希望尽可能地将所有文本保持在同一行中，可以在容器上设置white-space: nowrap;，并在span上将其重置为white-space: normal;。同样，这些设置只是为Firefox设置的。

​

div {
  background: yellow;
  width: 200px;
  white-space: nowrap;
}
span {
  background: aqua;
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
}

<div>
  Hello <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span> World
</div>

​

jsFiddle