Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

有人有解决方案吗？

Answer 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

上查看我的结果

Microsoft Edge错误使用连字符和flexbox

1 个答案: