html - 使用断字 : break-word; on Firefox

Question

我有一个用于文本段落的 div 元素。这是为了移动响应，所以我一直在用不同的浏览器/视口(viewport)大小测试它。我有以下代码:

.text {
  font-size: 18px;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 200px;
  border: red solid 1px;
}

<p class="text">Wordthatislongenoughtogetalineonitsown andawordthatfits fits</p>

调整窗口大小时，它在 Chrome 上看起来很好，w 会换行然后中断。 但是，在 Firefox 中，文字根本不会中断，div 元素会扩展以包含所有文本，从而在页面底部创建一个滚动条。

我怎样才能让它在 Firefox 中中断？我尝试添加 white-space: pre-wrap; 但它所做的只是添加丑陋的换行符，甚至没有强制断词。我不想使用 word-break: break-all; 因为那样会打断每个单词，而我只想打断溢出的单词。 overflow-wrap: break-word; 似乎什么也没做。

编辑: 我试图让它看起来像这样，这就是它在 Chrome 上的样子:Chrome Success

这是它在 Firefox 上的样子(不是我想要的):Firefox Error

这就是 break-all 的样子，这也不是我想要的。请注意单词在可以移动到下一行时是如何断开的:break-all

Answer 1

我建议完全删除 word-break，只保留 overflow-wrap(或 word-wrap，如果你想IE/Edge 支持)，应该没问题。

为什么？

更新

似乎规范 has been updated在 18 年 12 月将 break-word 值作为已弃用的值提及:

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

答案的旧部分

word-break: break-word 似乎是基于 Webkit 的浏览器中的错误(或者可能是旧 css 3 草稿的遗留问题？)，如 break-word 仅适用于 overflow-wrap(或 word-wrap，适用于旧版浏览器(和 Edge ;))属性。

我创建了一个 comparison in js fiddle

来源:

word-break spec

overflow-wrap / word-wrap spec