Question

我尝试更改word-break和<span>等内联元素的<a>属性，以更好地流动网页的内容。< / p>

似乎Firefox只识别显示为块的元素的word-break属性（例如<div>），而Chrome则尊重破坏字词的请求。

在下面的示例中，红色和蓝色部分在Chrome中呈现相同的效果（xxxxx在几行中分解）。在Firefox中，红色框中的xxxxx溢出。

＆＃13;

<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>

＆＃13;

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

哪种浏览器的行为正常？它是Firefox错误还是Chrome错误？

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

注意，在块级别设置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;，然后将其重置为white-space: normal;上的span。同样，这些设置仅适用于Firefox。

＆＃13;

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

＆＃13;

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

＆＃13;

<强> jsFiddle

用于内联元素的Firefox分词符

1 个答案: