在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题。
就是在一个设置了 flex:1 的容器中,如果文字很长,这时候文字就会超出容器,而不是呆在设置好的动态剩余的空间中。
例子:
大致是有一个main容器是flex布局,左边一个logo固定宽高,右边content动态宽度。
<div class="main">
<img alt="" class="logo" src="pic.jpg">
<div class="content">
<h4 class="name">a name</h4>
<p class="info">a info</p>
<p class="notice">This is notice content.</p>
</div>
</div>
.main {
display: flex;
}
.logo {
width: 100px;
height: 100px;
margin: 10px;
}
.content {
flex: 1;
}
.content > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.notice可能会非常长,一些