如何在 WP 8.1 上使用 IE 11 运行 断词?
How to break words with IE 11 running on WP 8.1?
我正在努力让 word-wrap: break-word;
在诺基亚 Lumia 930(可能还有其他 Windows 手机)上工作。有任何想法吗?文本只是浮动到下一个选项卡。
它似乎在 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
}
我正在努力让 word-wrap: break-word;
在诺基亚 Lumia 930(可能还有其他 Windows 手机)上工作。有任何想法吗?文本只是浮动到下一个选项卡。
它似乎在 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
}