使用弹性盒子Flex布局非常方便,比如实现左右布局的时候,简短的两行样式就实现了。不过虽然Flex布局很灵活,但有时候也会出现一些意想不到的效果,比如这里举个简单的示例:
<style>
.mybox {
width:600px;
display:flex;
color:#fff;
}
.left {
flex:2;
height:100px;
background-color:#579;
}
.right {
flex:1;
height:100px;
background-color:#2c9;
}
</style>
<div class="mybox">
<div class="left"><p>最美的不是下雨天,是曾与你躲过雨的屋檐。试着听你听的歌,走你走过的地方。</p></div>
<div class="right"><p>测试文字</p></div>
</div>
这里通过Flex实现左右两个区块的左右布局,并设置了左右两个区块的宽度比为2:1,得到了如下图所示的效果:
此时有个需求,希望设置左区块内的文字强制不换行,超出的部分隐藏,所以理所当然的想到设置如下的定义:
.left p {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
然而此时得到的效果如下图:
这里的文字并没有超出部分隐藏,可是将原本的区块宽度给撑大了,造成之前设置的比例无效,要解决此问题,不妨给左区块定义一个宽度,如:
.left {
flex:2;
height:100px;
width:50%;
background-color:#579;
}
这里虽然设置了50%,但并不会让左区块宽度真的变为总宽度的50%,而是恢复了之前所定义的比例,事实上这里即使将宽度设置为0也可以正常显示,但就是不能不设置。