如何打破在WP 8.1上运行的IE 11的话?
问题描述:
我努力让word-wrap: break-word;
在诺基亚Lumia 930(以及其他Windows手机)上工作。有任何想法吗?文本只是浮动到下一个标签。如何打破在WP 8.1上运行的IE 11的话?
它似乎在iOS和Android上运行正常。
body {
background: lightblue;
}
.container {
width: 320px;
margin: 20px auto;
border: 1px solid #ebebeb;
background: white;
}
.tabs {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.tab {
width: 25%;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
border-right: 1px solid #ebebeb;
}
.tab:last-child {
border-right: none;
}
.label {
display: block;
margin: auto 0;
text-align: center;
word-wrap: break-word;
}
<div class="container">
<div class="tabs">
<div class="tab">
<span class="label">xxxxxx xxx xxxxxxxxxx</span>
</div>
<div class="tab">
<span class="label">xxxxxx xx xxxxx</span>
</div>
<div class="tab">
<span class="label">xxxx xxxxxx</span>
</div>
<div class="tab">
<span class="label">xxxxxx xx</span>
</div>
</div>
</div>
答
添加align-self: stretch
到.label
解决它。
.label{
align-self: stretch
}
型号是无关紧要的,重要的是操作系统的版本,以及扩展名,浏览器及其版本。 – Stijn
操作系统:Windows Phone 8.1(8.10.14.234.375),浏览器:IE 11 –
相关:[为什么IE11不包含flexbox中的文本?](http://*.com/questions/35111090/why-ie11 -doesnt-总结的文本功能于Flexbox的) –