使用连字符和弹性框的 Microsoft Edge 错误答案

【问题标题】：Microsoft Edge bug using hyphenation and flexbox使用连字符和弹性框的 Microsoft Edge 错误
【发布时间】：2017-10-03 23:37:56
【问题描述】：

这段代码显示了两个 div 容器。在 ID 为 a 的 div 上设置了 display: flex;。在两者上，我们都使用-ms-hyphens: auto; 激活了连字符。但在 IE 或 Edge 中，连字符仅适用于没有附加 flexbox 的 div。正如预期的那样，它在 Chrome 和 Firefox 中运行良好。

div {
  max-width: 100px;
  background: red;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-bottom: 10px;
}
#a {
  display: flex;
}

<article>
  <div id="a" lang="en">
    Incomprehensibilities 
  </div>

  <div id="b" lang="en">
    Incomprehensibilities 
  </div>
</article>

https://codepen.io/anon/pen/jmGxJZ

有人有解决办法吗？

【问题讨论】：

您的 Codepen 示例都不能在我的 Chrome 58-64bit/Windows 10 ... 或 Firefox 上运行
我猜你的系统是用英文配置的。我的是德语的。所以我用英文单词更新了笔以进行连字符。它现在应该可以工作了。
仍然没有断线
不管怎样，今天使用 CSS 连字符看起来是一条崎岖不平的道路……而且 Flexbox 不是 真正的 块元素，您可能需要重新考虑。这篇文章有一些好处：css-tricks.com/almanac/properties/h/hyphenate
根据caniuse.com/#feat=css-hyphens 无论如何都不能在 Chrome Windows 上运行。但在 FF Windows 上它对我有用。在 Mac 上，它适用于 Chrome 和 FF。此外，我添加了 lang 标签以使其在 FF 上工作。但它仍然在 Internet Explorer 上中断。

标签： css internet-explorer flexbox microsoft-edge css-hyphens

【解决方案1】：

我终于找到了答案。

根据https://css-tricks.com/almanac/properties/h/hyphenate/

连字符属性控制块级文本的断字元素。

他们明确地说block level elements。所以我决定不使用 flexbox，因为这不是真正的块级元素，谢谢@LGSon。

为了让文本居中和连字符，我使用https://css-tricks.com/centering-css-complete-guide/ 中的方法将块级元素垂直居中。此外，根据http://caniuse.com/#feat=css-hyphens Windows 上的 Chrome 无论如何都不支持断字。所以我使用word-break: break-all; 仅用于Chrome 使用来自这里https://stackoverflow.com/a/13587388/4558231 的媒体查询黑客。最后，它适用于 MAC OSX 上的 Chrome、FF 和 Safari。也适用于 Windows 上的 Edge 和 IE11。

你可以在https://codepen.io/bierik/pen/mmBjqQ看到我的结果

【讨论】：

您应该使用段落(
) 来块显示文本。对于国际化，您还应该在 html 标记中添加一个 lang /xml:lang 属性。要让谷歌翻译在您的页面上工作，您需要在 head 块中添加一个内容语言与 http 等效的元标记。
@RobParsons - 将测试词放在
中是不行的。然后 IE 仍然不会连字符它。我认为 Edge 也没有。