柔性容器中的文本不包装在IE11中 [英] Text in a flex container doesn't wrap in IE11

问题描述

请考虑以下代码段：

.parent {display：flex; flex-direction：column;宽度：400px;边框：1px纯红色;

< div class =parent> < div class =child> Lorem Ipsum只是印刷和排版行业的虚拟文本< / div> < div class =child> Lorem Ipsum只是印刷和排版行业的虚拟文本< / div>< / div>

在Chrome中，文本正如预期的那样包装：

但是，在IE11中，文本没有包装：

这是IE中的一个已知错误吗？ （如果是的话，一个指针将不胜感激）

是否有一个已知的解决方法？

---

这个类似的问题没有明确的答案和正式的指针。

解决方案

添加到您的代码中：

  .child {width：100％; } 
  

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

Chrome理解这一点。

无论出于何种原因，IE11都希望获得明确的请求。 b
$ b

使用 flex-basis：100％或 flex：1 也可以。
$ b

.parent {display：flex; flex-direction：column;宽度：400px;边框：1px纯红色; align-items：center;}。child {border：1px solid blue; width：calc（100％ - 2px）; / *新;使用calc调整父边界* /}

< div class =parent> < div class =child> Lorem Ipsum只是印刷和排版行业的虚拟文本< / div> < div class =child> Lorem Ipsum只是印刷和排版行业的虚拟文本< / div>< / div>

注意：有时需要对HTML结构的不同层次进行排序，以确定哪个容器获得了宽度：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屋！