使用断词：断词；在火狐上答案

【问题标题】：Using word-break: break-word; on Firefox使用断词：断词；在火狐上
【发布时间】：2017-11-11 22:13:54
【问题描述】：

我有一个用于文本段落的 div 元素。这旨在响应移动设备，因此我一直在使用不同的浏览器/视口大小对其进行测试。我有以下代码：

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

&lt;p class="text"&gt;Wordthatislongenoughtogetalineonitsown andawordthatfits fits&lt;/p&gt;

调整窗口大小后，它在 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

【问题讨论】：

对于FF，使用word-break: break-all;
word-break: break-all; 具有不同的功能，所有单词都被破坏了
实际上，break-word 是在旧 IE(5.5->7) 中实现的 word-wrap 的值，你可能在这里误会了这两个规则：developer.mozilla.org/en-US/docs/Web/CSS/word-break & msdn.microsoft.com/en-us//library/… 这是以developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap 的身份回到草稿中，最好的办法是检查您可以将哪些规则应用于您想要使用的规则，然后选择那些按预期工作的规则；）
我尝试了overflow-wrap: break-word;，但似乎没有任何反应，word-wrap: break-word; 也是如此。我的目标是当且仅当它本身不适合一行时才打破这个词。我在上面链接的 Chrome 实现正是我正在寻找的。我知道break-word 对于 WebKit 浏览器来说是非标准的，但我正在寻找另一种方法来获得相同的效果。
好的，我已经分享了您的初始代码的 sn-p，也许您也可以添加您的几次尝试，以便它们可以在答案中重复使用并实时显示访问者浏览器中发生的情况。我同意，那时 FF 的行为很奇怪。溢出包装测试codepen.io/anon/pen/POjbaW 在 FF 和 Chrome 中运行良好，您使用什么版本的操作系统/浏览器？

标签： html css google-chrome firefox word-break

【解决方案1】：

我建议完全删除word-break，并留下overflow-wrap（或word-wrap，如果你想要IE/Edge支持），应该没问题。

为什么？

更新

似乎 has been updated 在 18 年 12 月的规范中提到 break-word 值已被弃用：

为了与旧内容兼容，分词属性还支持已弃用的断词关键字。指定后，这与 word-break: normal 和 overflow-wrap:anywhere 具有相同的效果，而与 overflow-wrap 属性的实际值无关。

答案的旧部分

word-break: break-word 似乎是基于 Webkit 的浏览器中的一个错误（或者可能是旧版 css 3 草案的遗留物？），因为 break-word 仅适用于 overflow-wrap（或 word-wrap，对于旧版browsers (和 Edge ;) ) 属性。

我创建了一个 comparison in js fiddle

源代码：

word-break spec

overflow-wrap / word-wrap spec

【讨论】：