CSS word-break在Microsoft边缘无法正常工作

Question

我注意到，在Microsoft Edge中，某些css属性存在问题，例如：

word-break: break-word;

有没有办法解决这个问题，还是有办法解决这个问题？

Answer 1

MS Edge支持

word-break 。 Here is a list支持的浏览器。这里的问题是你给了它一个不正确的财产。有效word-break属性为：

word-break: normal|break-all|keep-all|initial|inherit;

Answer 2

另一种解决方案是利用IMHO表现得更“智能”的word-wrap属性 - 意味着单词break只会在单词太长而无法适应行宽时应用，并赢得' t应用于可以简单地移动到下一行的单词。

CSS：

word-wrap: break-word;

大多数浏览器都支持word-wrap属性，截至今天，我当然可以确认它适用于Microsoft Edge，IE11，Chrome，Firefox，Opera和Safari。

注意，word-wrap现已重命名为overflow-wrap，word-wrap现在是该属性的替代名称，但Microsoft Edge无法理解overflow-wrap使用word-wrap进行跨浏览器兼容性。

Answer 3

值得一提的是，虽然word-break: break-word;是不正确的属性，但它在WebKit中是未记录的和非标准的属性值。这使得自动换行符的行为类似word-wrap: break-word，但适用于动态宽度。

Answer 4

使用-ms-word-break: break-all; 在word-break: break-word;

之前

Answer 5

问题是您必须为容器/文本提供宽度才能使用word-break: break-word属性。避免这种情况的唯一方法是使用非官方的仅WebKit / Blink word-wrap: break-word属性：https://caniuse.com/#search=word-break

Answer 6

overflow-wrap: break-word;

是要走的路，现在works also for Edge。

感谢@David提到它！

Answer 7

word-wrap: break-word;
display: inline-block;
width: 100%;

尝试