html - 使用显示 : -moz-box and -ms-flexbox? 时如何在 Firefox 和 IE 10 中自动换行

Question

当您将 word-wrap: break-word; 与 display: -moz-box; 和 display: -ms-flexbox 一起使用时文本不换行。

使用 Chrome 版本时:display:-webkit-box;一切正常。

这是一个例子:

JSFiddle

如何在 IE 和 Firefox 中垂直居中并使用自动换行？

Answer 1

我在父 div 和设置为 flex 的子 div 上结合使用 word-wrap: break-word 和 display: flex; 时遇到问题-增长:1。我在 this Firefox bug report 的讨论中找到了解决方案.

设置最小宽度:0； word-wrap: break-word; 对 child 有效。

从该错误报告中获取的此行为的原因是:

That flex item has the (new default) "min-width:auto", and on flex items, that makes them refuse to shrink smaller than their min-content size -- the length of the text.

To work around this & allow the flex item to shrink, you need to do two things: (1) Put the raw text inside of an explicit flex item (e.g. a ), rather than putting it directly inside of the flex container -- so that you can style it. (You can't style an anonymous flex item.) (2) Style that flex item with "min-width:0".