使用连字符和Flexbox的Microsoft Edge错误

Question

此代码显示了两个div容器。在与该ID的DIV a的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>

有人有解决方案吗？

Answer 1

我终于找到了答案。

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

他们明确地说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;仅使用来自这里/sf/answers/951117191/的媒体查询技巧，将其用于Chrome浏览器。最终，它可以在MAC OSX上用于Chrome，FF和Safari。也适用于Windows上的Edge和IE11。