显示 flex 单元格 IE10 内的断字/换行

Question

在 IE10 中显示 flex 的单元格内出现断字问题。它在 chrome 上表现正确，比较 chrome 中的 fiddle 以查看预期的行为。

在示例中，table 中的第一个单元格应该分词而不是流入下一个单元格。

我尝试了多种分词和换行，（none chrome/mozilla 需要其中的一种）但它们在 IE 中不起作用。

感谢任何帮助。

HTML:

<div class="container">
    <div class="table">
        <div class="table-row">
            <div class="table-row-cell">Long string input that we want to word break and not overflow into other cell</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
        </div>
        <div class="table-row">
            <div class="table-row-cell">normal length</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
            <div class="table-row-cell">short</div>
        </div>
    </div>
</div>

CSS:

html, body { padding: 0; margin: 0; }
.container {
    width: 400px;
}
.table {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -ms-flex-direction: column;
    -ms-flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;  
}
.table-row {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-direction: row;
    -ms-flex-wrap: nowrap;
}
.table-row-cell {
    display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  -webkit-flex-basis: 0;
  -moz-flex-basis: 0;
  flex-basis: 0;
  -ms-flex-preferred-size: 0;
  /*  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  -ms-word-wrap: break-word;
  -ms-overflow-wrap: break-word;
  -ms-word-break: break-all;
  -ms-word-break: break-word;*/
  padding: 0.5em;
}

Answer 1

这实际上是 IE 10 和 11 (https://github.com/philipwalton/flexbugs#12-inline-elements-are-not-treated-as-flex-items) 中 flexbox 的一个已知错误。

我想出的唯一可能有助于解决您的问题的解决方法是将溢出的内容包装在块级元素中，然后在该元素上设置最大宽度：

<div class="table-row-cell">
  <p style="display: block; max-width: 100px;">
    Long string input that we want to word break and not overflow into other cell
  </p>
</div>

这个解决方案的结果：

显示 flex 单元格 IE10 内的断字/换行

Word-break / word-wrap inside display flex cell IE10

css

internet-explorer-10

flexbox