为什么IE11不会在flexbox中包装文本？ [英] Why IE11 doesn't wrap the text in flexbox?

问题描述

请考虑以下代码段：

.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中，文本如预期包装：

In Chrome, the text is wrapping as expected:

但是，在IE11中，文本不包括：

But, in IE11, the text is not wrapping:

这是IE中的已知错误吗？

Is this a known bug in IE? (if yes, a pointer will be appreciated)

有没有已知的解决方法？

Is there a known workaround?

此类似问题没有明确答案和官方指针。

This similar question doesn't have a definite answer and an official pointer.

推荐答案

将此代码添加到代码中：

Add this to your code:

.child { width: 100%; }

我们知道块级子级应该占用父级的全宽。

We know that a block-level child is supposed to occupy the full width of the parent.

Chrome可以理解这一点。

Chrome understands this.

IE11无论出于何种原因都需要明确的请求。

IE11, for whatever reason, wants an explicit request.

使用 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结构的各个级别进行排序，以确定哪个容器获得 width：100％。 CSS换行文字在IE中无法运行

Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%. CSS wrap text not working in IE

这篇关于为什么IE11不会在flexbox中包装文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！