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

Question

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

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

这是一个例子：

JSFiddle

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

Answer 1

我word-wrap: break-word在与display: flex;父 div 和设置为flex-grow: 1. 我在这个 Firefox 错误报告的讨论中找到了解决方案。

设置min-width: 0; word-wrap: break-word;在孩子身上起作用了。

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

该弹性项目具有（新的默认）“最小宽度：自动”，并且在弹性项目上，这使得它们拒绝收缩小于它们的最小内容大小 - 文本的长度。

要解决这个问题并允许弹性项目缩小，您需要做两件事：（1）将原始文本放在显式弹性项目（例如 a ）内，而不是将其直接放在弹性容器内 - 所以你可以设计它。（您不能为匿名弹性项目设置样式。） (2) 使用“min-width: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 可以是你想要的任何东西。