省略是非常常见的功能。
简单的实现省略号
下面的代码就可以实现省略号,超过宽度的时候就会出现省略号
.text-name{
//宽高是一定要设置的不然是会无效延伸的
width: 200rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
稍微复杂点的情况(动态显示省略号)
如果省略号的右边还有内容,因为宽度是固定的,就会出现中间有空白的情况,而且时大时小。这时候把宽度设置到父容器上,并且设置子组件display: inline-block;就可以实现动态显示省略号的功能。
.text-account {
width: 380rpx;
.text-name{
//宽高是一定要设置的不然是会无效延伸的
display: inline-block;
//width: 200rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}