4

此代码显示了两个 div 容器。在 div 上设置了aid 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

有人有解决方案吗？

4

1 回答 1

5

我终于找到了答案。

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

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

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

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

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

于 2017-05-05T14:31:15.983 回答