0

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

.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 错误

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

4

1 回答 1

-1

我建议word-break完全删除，然后离开overflow-wrap（或者word-wrap，如果你想要 IE/Edge 支持），它应该没问题。

为什么？

更新

似乎该规范已在 18 年 12 月更新，以提及该break-word值已弃用：

为了与旧内容兼容，word-break 属性还支持不推荐使用的 break-word 关键字。指定时，这与 word-break: normal 和 overflow-wrap:anywhere 具有相同的效果，而与 overflow-wrap 属性的实际值无关。

答案的旧部分

word-break: break-word似乎是基于 Webkit 的浏览器中的一个错误（或者可能是旧 css 3 草案的遗留物？），因为break-word只有overflow-wrap(or word-wrap, for old browsers (and Edge ;) ) 属性的正确值。

我 在 js fiddle 中创建了一个比较

源代码：

断字规范

溢出包装/自动换行规范

于 2018-05-17T14:56:14.650 回答