0
点赞
收藏
分享

微信扫一扫

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

肉肉七七 2023-06-30 阅读 47
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;
              //width: 200rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
举报

相关推荐

0 条评论