Css 弹性容器中的文本不会在 IE11 中换行

发布于01月31日

请考虑以下代码片段:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

在Chrome中，文本按预期换行:

但是，在IE11,the text is not wrapping:

个

这是IE中的已知错误吗？(如有，敬请指点)

是否有已知的解决方法？

This similar question没有明确的答案和官方的指标.

推荐答案

将此代码添加到您的代码中:

.child { width: 100%; }

我们知道一个块级的子对象应该占据父对象的整个宽度.

Chrome理解这一点.

无论出于什么原因，IE11都想要一个明确的请求.

使用flex-basis: 100%或flex: 1也可以.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

注意:有时需要对HTML struct 的各个级别进行排序，以确定哪个容器获得width: 100%.CSS wrap text not working in IE