CSS包装文本在IE中不起作用 [英] CSS wrap text not working in IE
本文介绍了CSS包装文本在IE中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了一些在Chrome和Firefox中都能正常工作的样式问题，但是它们不在IE中。
面对基本上是一个特定的风格应用在Chrome中运行良好，但它不在IE中。文本不会包装到列中。
如何重现它？首先在Chrome或Firefox浏览 小提琴 ，然后在IE浏览器。
< img src =https://i.stack.imgur.com/j8R7s.pngalt =在这里输入图片描述>
事情比较简单，直接从这里试一下：
$ b
.Container {display：flex ; column-item-x2 {width：50％text-align：center;} column {flex-direction：column;}。 ;}。jc-start {justify-content：flex-start;}。resume-item {padding-left：10px; padding-right：10px; padding-top：4px; padding-bottom：4px; border-radius：7px;显示：内联块;位置：相对; font-size：medium; right：15px;}。dot {position：relative;显示：内联块; align-self：center; border-radius：10px;身高：12px;宽度：12px; right：37px;}。dot-skill {display：inline-block; align-self：center; border-radius：15px; margin-right：3px; height：15px; width：15px;}。skill {margin-right：5px; margin-bottom：5px;}
< div id = resumeclass =Container columnstyle =margin-top：50px;> < span style =textAlign：left; fontSize：40px; color：red;> < input type =checkboxid =Resume-chkstyle =display：none; /> < b id =简历标题> RESUME< / b> < /跨度> < hr /> < div class =Container row jc-centerstyle =margin-top：30px;> < div class =Container column jc-start column-item-x2id =professionalstyle =color：red;> < div class =Container rowstyle =border-left：solid 2px＃B4B2B2; padding-left：30px;> < div style =text-align：left;> < h2 style =color：red;>专业< / h2> < div class =容器列> < div class =容器行> < div class =dotstyle =background-color：red;>< / div> < div style = {{position：relative}}> < span class =resume-itemstyle =color：white; background-color：red;>< b> 2016年11月至今< / b>< / span> < / DIV> < / DIV> < div style =text-align：left;> < H3> Web.com< / H3> < p style =color：gray;> <跨度>当前工作的工程师III Fullstack .NET en Web.com，电子商务和电子商务北美电子商务。 < br /> Realizo mantenimiento y nuevos desarrollos tanto back-end como front-end del portal de ticketeting de lacompañía。 < /跨度> < / p为H. < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =Container column jc-start column-item-x2id =personalstyle =color：red;> < div class =Container rowstyle =border-left：solid 2px＃B4B2B2; padding-left：30px> < div style =text-align：left;> < h2 style =color：red;> SKILLS< / h2> < div class =容器列> < DIV> < div class =容器行> < div class =dotstyle =background-color：red; /> < div style =position：relative;> < span class =resume-itemstyle =padding-left：3px; padding-bottom：6px; text-align：left; color：red;>< b> C＃< / b><跨度> < / DIV> < / DIV> < div class =容器行style =margin-bottom：20px;> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：red; /> < div class =dot-skillstyle =background-color：＃B4B2B2; /> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < div class =Container rowstyle =border-left：solid 2px＃B4B2B2; padding-left：30px;> < div style =text-align：left; }}> < h3 style =color：red;> OTHER_SKILLS< / h3> < div class =Container rowstyle =margin-left：15px; flex-wrap：wrap; }}> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> TDD< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> Scrum< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> MongoDB< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> ElasticSearch< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> Flux< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> Firebase< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> .Net MVC 5< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> REST Services< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> SOA< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> OAuth< / span> < span class =resume-item skillstyle =font-size：small; color：white; background-color：red;> ExpressJS< / span> < / DIV> < / DIV> < / DIV> < / DIV> < / div>< / div>
。 正常的解决方法是为容器定义一个宽度。
什么不是总是清楚的是：哪个容器？</ p>
<在这种情况下，这些调整似乎有效：
#professional> .row> div {width：100％; }
#personal .row .row .row> div {width：100％; }
I'm facing some problems with some styles that are working properly in both Chrome and Firefox, but they don't in IE.
The problem I'm facing basically is that a particular style applied works fine in Chrome but it does not in IE. Text does not wrap into the column.
How to reproduce it? Take a look at this fiddle first in Chrome or Firefox, and then do it in IE.
To make things easier, try it directly from here:
.Container {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.row {
flex-direction: row;
}
.jc-center {
justify-content: center;
}
.column-item-x2 {
width: 50%;
}
.jc-start {
justify-content: flex-start;
}
.resume-item {
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
border-radius: 7px;
display: inline-block;
position: relative;
font-size: medium;
right: 15px;
}
.dot {
position: relative;
display: inline-block;
align-self: center;
border-radius: 10px;
height: 12px;
width: 12px;
right: 37px;
}
.dot-skill {
display: inline-block;
align-self: center;
border-radius: 15px;
margin-right: 3px;
height: 15px;
width: 15px;
}
.skill {
margin-right: 5px;
margin-bottom: 5px;
}
<div id="resume" class="Container column" style=" margin-top: 50px;">
<span style="textAlign: left; fontSize: 40px; color: red;">
<input type="checkbox" id="Resume-chk" style="display: none;" />
<b id="Resume-title">RESUME</b>
</span>
<hr />
<div class="Container row jc-center" style="margin-top: 30px;">
<div class="Container column jc-start column-item-x2" id="professional" style="color: red;">
<div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
<div style="text-align: left;">
<h2 style="color: red;">PROFESSIONAL</h2>
<div class="Container column">
<div class="Container row">
<div class="dot" style="background-color: red;"></div>
<div style={{ position: "relative" }}>
<span class="resume-item" style="color: white; background-color: red;"><b>Nov 2016 - Present</b></span>
</div>
</div>
<div style="text-align: left;">
<h3>Web.com</h3>
<p style="color: gray;">
<span>
Actualmente trabajo como Engineer III Fullstack .NET en Web.com,
una compañía con fuerte posición en el mercado norteamericano de eCommerce. <br />
Realizo mantenimiento y nuevos desarrollos tanto back-end como front-end
del portal de ticketing de la compañía.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="Container column jc-start column-item-x2" id="personal" style="color: red;">
<div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px">
<div style="text-align: left;">
<h2 style="color: red;">SKILLS</h2>
<div class="Container column">
<div>
<div class="Container row">
<div class="dot" style="background-color: red;" />
<div style="position: relative;">
<span class="resume-item" style="padding-left: 3px; padding-bottom: 6px; text-align: left; color: red;"><b>C#</b></span>
</div>
</div>
<div class="Container row" style="margin-bottom: 20px;">
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: red;" />
<div class="dot-skill" style="background-color: #B4B2B2;" />
</div>
</div>
</div>
</div>
</div>
<div class="Container row" style="border-left: solid 2px #B4B2B2; padding-left: 30px;">
<div style="text-align: left;" }}>
<h3 style="color: red;">OTHER_SKILLS</h3>
<div class="Container row" style="margin-left: 15px; flex-wrap: wrap;" }}>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">TDD</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Scrum</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">MongoDB</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ElasticSearch</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Flux</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">Firebase</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">.Net MVC 5</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">REST Services</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">SOA</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">OAuth</span>
<span class="resume-item skill" style="font-size: small; color: white; background-color: red;">ExpressJS</span>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks a lot.
解决方案
IE has a problem with wrapping in flexbox.
The normal fix is to define a width for the container.
What is not always clear is: which container?
In this case, these adjustments seem to work:
#professional > .row > div { width: 100%; }
#personal .row .row .row > div { width: 100%; }
Related: Why IE11 doesn't wrap the text in flexbox?
这篇关于CSS包装文本在IE中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![< img src =https://i.stack.imgur.com/j8R7s.pngalt =在这里输入图片描述>](\"https://i.stack.imgur.com/j8R7s.png\"){kind=link}