css 显示省略号 和 动态显示省略号

省略是非常常见的功能。

简单的实现省略号

下面的代码就可以实现省略号，超过宽度的时候就会出现省略号

.text-name{
    //宽高是一定要设置的不然是会无效延伸的
    width: 200rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

稍微复杂点的情况（动态显示省略号）

如果省略号的右边还有内容，因为宽度是固定的，就会出现中间有空白的情况，而且时大时小。这时候把宽度设置到父容器上，并且设置子组件display: inline-block;就可以实现动态显示省略号的功能。

.text-account {
    width: 380rpx;
    .text-name{
        //宽高是一定要设置的不然是会无效延伸的
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}