3

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

看起来,Firefox 只识别显示为块(例如<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不能在块级别进行设置。

4

1 回答 1

5

您可以尝试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。

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

于 2016-07-01T15:59:55.633 回答