CSS 换行文本在 IE 中不起作用
[英] CSS wrap text not working in IE
本文介绍了CSS 换行文本在 IE 中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有些样式在 Chrome 和 Firefox 中都可以正常工作，但在 IE 中却不能.
我面临的问题基本上是应用的特定样式在 Chrome 中运行良好，但在 IE 中不起作用.文本不包含在列中.
如何重现?首先在 Chrome 或 Firefox 中查看
为了简化操作，请直接从这里尝试:
.Container {显示:弹性；文本对齐:居中；}.柱子 {弹性方向:列；}.排 {弹性方向:行；}.jc-中心{对齐内容:居中；}.column-item-x2 {宽度:50%；}.jc-开始{justify-content: flex-start;}.resume-item {左边距:10px；padding-right: 10px;填充顶部:4px；填充底部:4px；边框半径:7px；显示:内联块；位置:相对；字体大小:中等；右:15px；}.dot {位置:相对；显示:内联块；对齐自我:居中；边框半径:10px；高度:12px；宽度:12px；右:37px；}.dot技能{显示:内联块；对齐自我:居中；边框半径:15px；右边距:3px；高度:15px；宽度:15px；}.技能 {右边距:5px；底边距:5px；}
<span style="textAlign: left; fontSize: 40px; color: red;"><input type="checkbox" id="Resume-chk" style="display: none;"/><b id="简历标题">简历</b></span><小时/><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;">专业</h2><div class="容器列"><div class="容器行"><div class="dot" style="background-color: red;"></div><div style={{ position: "relative" }}><span class="resume-item" style="color: white; background-color: red;"><b>2016 年 11 月 - 现在</b></span>
<div style="text-align: left;"><h3>Web.com</h3><p style="颜色:灰色；"><跨度>Actualmente trabajo como 工程师 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-enddel portal deticketing de la compañía.</span></p>
<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;">技能</h2><div class="容器列"><div><div class="容器行"><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></跨度>
<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 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>
非常感谢.
解决方案
IE 在 flexbox 中出现换行问题.
通常的解决方法是定义容器的宽度.
不总是清楚的是:哪个容器?</p>
在这种情况下，这些调整似乎有效:
#professional >.row >div { 宽度:100%；}#personal .row .row .row >div { 宽度:100%；}
修正小提琴
相关:为什么 IE11 不将文本包裹在 flexbox 中?
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%; }
revised fiddle
Related: Why IE11 doesn't wrap the text in flexbox?
这篇关于CSS 换行文本在 IE 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
