使用連字符和柔性盒的Microsoft Edge錯誤

Question

此代碼顯示兩個div容器。在與編號a的div是display: flex;集合。在這兩個我們已使用-ms-hyphens: auto;激活連字符。 但在IE或Edge中，連字符僅適用於未連接柔性盒的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

是否有人有辦法解決嗎？

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，使用從這裏的媒體查詢hack https://stackoverflow.com/a/13587388/4558231。 最後它適用於MAC OSX上的Chrome，FF和Safari。 也適用於Windows的Edge和IE11。

你可以看到https://codepen.io/bierik/pen/mmBjqQ