Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

当窗口调整大小时，它在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: break-word似乎是基于Webkit的浏览器中的一个错误（或者可能是旧版css 3草稿中的遗留问题？），因为break-word只是overflow-wrap的正确值（或word-wrap，适用于较旧的浏览器（和Edge;））属性。

因此，在您的情况下，我建议您删除word-break，然后离开overflow-wrap（或word-wrap，如果您需要IE / Edge支持），它应该是细

我创造了一个 comparison in js fiddle

的src：

word-break spec

overflow-wrap / word-wrap spec

使用word-break：break-word;在Firefox上

1 个答案: