CSS 断字在 Microsoft edge 中无法正常工作

Question

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

word-break: break-word;

是否有解决此问题的方法或解决此问题的方法？

Answer 1

word-break: break-word 已弃用，并且不受 MS Edge 或 MS IE 支持。参见 mozilla documentation about this。

word-break 受支持浏览器的 MS Edge 和 MS IE Here is a list 支持。

有效的 MS Edge 和 MS IE word-break 属性是：

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

或者 mozilla 文档指定 overflow-wrap: break-word; 以您希望 word-break: break-word 运行的方式运行。

Answer 2

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

Answer 3

另一种解决方案是使用 word-wrap 属性恕我直言，它表现得更好 'intelligently' - 这意味着只有当单词太长而不适合时才应用断词成一行宽度，并且不会应用于可以简单地整体移动到下一行的单词。

CSS:

word-wrap: break-word;

大多数浏览器都支持 word-wrap 属性，截至今天，我可以肯定地确认它在 Microsoft Edge、IE11、Chrome、Firefox、Opera 和 Safari 中工作。

请注意，word-wrap 现在已重命名为 overflow-wrap，word-wrap 现在是属性的替代名称，但 overflow-wrap 不是Microsoft Edge 可以理解，因此请坚持使用 word-wrap 以实现跨浏览器兼容性。

Answer 4

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

之前

Answer 5

问题是您必须为 container/text 提供宽度才能使用 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%;

试试这个

CSS 断字在 Microsoft edge 中无法正常工作

CSS word-break does not work correctly in Microsoft edge

html

css

layout

microsoft-edge