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

【问题标题】：How do you word wrap in Firefox and IE 10 while using display: -moz-box and -ms-flexbox?在使用 display:-moz-box 和 -ms-flexbox 时如何在 Firefox 和 IE 10 中自动换行？
【发布时间】：2013-09-27 01:32:15
【问题描述】：

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

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

这是一个例子：

JSFiddle

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

【问题讨论】：

标签： html css firefox internet-explorer-10

【解决方案1】：

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

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

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

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

要解决这个问题并允许弹性项目缩小，您需要做两件事： (1) 将原始文本放在 explicit flex item 中（例如 a ），而不是将其直接放在 flex 容器中——这样您就可以设置它的样式。（您不能为匿名弹性项目设置样式。） (2) 使用 "min-width:0" 设置弹性项目的样式。

【讨论】：

除非您的问题与这篇 3 年多的关于与 flexbox 无关的过时和非标准 CSS 属性的帖子无关。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我今天在同样的问题上苦苦挣扎，几分钟前设法让它工作： http://jsfiddle.net/lmartins/3dHDd/

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

【讨论】：