弹性容器中的文本不会在 IE11 中换行 [英] Text in a flex container doesn't wrap in IE11

问题描述

考虑以下片段:

.parent {显示:弹性；弹性方向:列；宽度:400px；边框:1px纯红色；对齐项目:居中；}.孩子 {边框:1px纯蓝色；}

<div class="child">Lorem Ipsum 简直就是印刷排版行业的假文字
<div class="child">Lorem Ipsum 简直就是印刷排版行业的假文字

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

但是，在 IE11 中，文本没有换行:

这是 IE 中的已知错误吗?(如果是，将不胜感激)

是否有已知的解决方法?

<小时>

这个类似的问题没有明确的答案和官方指示.

解决方案

将此添加到您的代码中:

.child { 宽度:100%;}

我们知道块级子级应该占据父级的全部宽度.

Chrome 理解这一点.

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

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

.parent {显示:弹性；弹性方向:列；宽度:400px；边框:1px纯红色；对齐项目:居中；}.孩子 {边框:1px纯蓝色；宽度:计算(100% - 2px)；/* 新的;使用 calc 来调整父边框 */}

<div class="child">Lorem Ipsum 简直就是印刷排版行业的假文字
<div class="child">Lorem Ipsum 简直就是印刷排版行业的假文字

注意:有时需要对 HTML 结构的各个级别进行排序，以确定哪个容器获得了 width: 100%.CSS 换行文本在 IE 中不起作用

Consider the following snippet:

.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>

In Chrome, the text is wrapping as expected:

But, in IE11, the text is not wrapping:

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 understands this.

IE11, for whatever reason, wants an explicit request.

Using flex-basis: 100% or flex: 1 also works.

.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>

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 中换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！