我正在努力让 word-wrap: break-word;
在 Nokia Lumia 930(可能还有其他 Windows 手机)上运行。有任何想法吗?文本只是 float 到下一个选项卡。
它似乎在 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
}
关于html - 如何使用在 WP 8.1 上运行的 IE 11 断词?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39788505/