使用连字符和柔性盒的Microsoft Edge错误

此代码显示两个div容器。在与编号a的div是display: flex;集合。在这两个我们已使用-ms-hyphens: auto;激活连字符。但在IE或Edge中，连字符仅适用于未连接柔性盒的div。正如预期的那样，它在Chrome和Firefox中运行良好。使用连字符和柔性盒的Microsoft Edge错误

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

是否有人有办法解决吗？

来源

2017-05-05 Kevin Bieri

无论您Codepen样的结果我在我的Chrome 58-64bit/Windows的10 ...或Firefox – LGSon

我猜你的系统在英语学习中配置工作。我的是德国人。所以我用英文单词更新了笔的连字符。它现在应该工作。 –

仍然没有断线 – LGSon

我终于找到了答案。

根据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

来源

2017-05-05 14:31:15

现在它适用于我... + 1 – LGSon

您应该使用段落（

）来显示文本块。对于国际化，您还应该为html标签添加一个lang/xml：lang属性。对于谷歌翻译工作在你的页面上，你需要在头部块中添加一个内容语言的http等价元标记。 –

使用连字符和柔性盒的Microsoft Edge错误

回答

相关问题