内联元素的 Firefox 分词

Question

我正在尝试更改某些内联元素（例如 <span> 和 <a>）的 word-break 属性，以更好地显示页面内容。

似乎 Firefox 只识别显示为块的元素的分词属性（例如 <div>），而 Chrome 尊重分词的请求。

在下面的示例中，红色和蓝色部分在 Chrome 中呈现相同（xxxxx 被分成几行）。在火狐浏览器中，红框内的 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/

哪个浏览器的行为正确？是 Firefox 的 bug 还是 Chrome 的 bug？

还有更重要的是，如何在所有浏览器中达到想要的效果？

注意，不能在块级别设置word-break:break-all。

Answer 1

您可以尝试为 Firefox 添加额外的 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