默认的flex布局下的 标题文字超出后省略号显示无效
解决办法:
flex:1
的盒子中,设置overflow: hidden;
或 width: 0;
即可。
在<div class="box">
<div class="son">
<p class="title">一大段文字超出后会缩略吗,怎么实现</p>
</div>
</div>
.box{
display: flex;
justify-content: flex-start;
align-items: center;
}
.son{
flex: 1;
overflow: hidden; // 设置overflow: hidden; 或 width: 0;
// width: 0;
}
.title {
// 省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}