如何在Firefox和IE 10中使用display时自动换行:-moz-box和-ms-flexbox

Question

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

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

下面是一个示例：

JSFiddle

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

Answer 1

我在将word-wrap: break-word与父div 和设置为 flex-grow: 1 的子级上的display: flex;结合使用时遇到了问题。我在此Firefox错误报告的讨论中找到了解决方案。

在孩子身上设置min-width: 0; word-wrap: break-word;有效。

此行为的原因是，取自该错误报告，是：

该弹性项目

具有（新的默认值）"min-width：auto"，而在弹性项目上，这使得它们拒绝缩小到小于其最小内容大小 - 文本的长度。

要解决此问题并允许弹性项目缩小，您需要做两件事： （1）将原始文本放在显式弹性项目（例如a）中，而不是直接放在弹性容器中 - 以便您可以设置其样式。（不能设置匿名弹性项目的样式。 （2） 用"最小宽度：0"设置该弹性项目的样式。

Answer 2

您可以将文本包装在 <p> 标记中，然后应用以下 css：

p{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
}

现场演示：http://jsfiddle.net/d6Y4Z/10/

Answer 3

我今天遇到了同样的问题，几分钟前设法让它工作：http://jsfiddle.net/lmartins/3dHDd/

对我来说，关键是让标签带有display: inline-block，然后是 flexbox 声明-ms-flex: 0 1 100%;，其中最后一个参数 flex-basis 可以是您想要的任何参数。