css - 内联元素的 Firefox 分词

Question

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

Firefox 似乎只识别显示为 block 的元素的分词属性(例如 <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/

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

更重要的是，我怎样才能在所有浏览器中达到预期的效果？

注意，设置word-break:break-all在 block 级别不是一个选项。

Answer 1

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

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

如果想尽量让所有的文字保持在同一行，可以在容器上设置white-space: nowrap;，重新设置为white-space : 正常； 在 span 上。同样，这些设置仅适用于 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