实现效果:
如图二
报错问题:
如图一,标题并没有显示省略号,并且还独占一行
问题原因:
因为整个li
是flex
布局,detail
为右侧占flex:1
,并没有设置固定的宽度,当title
设置不换行时,拿到的宽度时整个li的宽度,所以需要把detai
设置width:0
代码结构
解决方法:给父元素的width
设为0
li {
width: 100%;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
.cover {
width: 81px;
margin: 0 10px 0 14px;
}
.detail {
flex: 1;
width: 0;//!!!!!!!这块需要设为0
height: 50px;
margin-right: 10px;
color: #ffffff;
font-size: 12px;
line-height: 20px;
.title {
width: 100%;
height: 20px;
color: #d3d3d3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}