为什么IE11不会在flexbox中包装文本? [英] Why IE11 doesn't wrap the text in flexbox?
本文介绍了为什么IE11不会在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中,文字不包括:
这是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>
这篇关于为什么IE11不会在flexbox中包装文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文