Firefox内置元素的分词

Question

我正在尝试更改word-break某些内联元素的属性<span>，<a>以使页面内容更流畅。

似乎Firefox仅识别显示为块的元素的word-break属性（例如<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在块级别设置不是选项。

Answer 1

您可以尝试word-wrap: break-word;为Firefox 添加其他功能。

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

如果要尽可能将所有文本保留在同一行中，则可以white-space: nowrap;在容器上进行设置，然后将其重置white-space: normal;为span。同样，这些设置仅适用于Firefox。

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

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

jsFiddle