css display ellipsis and dynamic display ellipsis

Omitting is a very common feature.

Simple implementation of ellipsis

The following code can realize the ellipsis, and the ellipsis will appear when it exceeds the width

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

A slightly more complicated situation (dynamic display of ellipsis)

If there is content on the right side of the ellipsis, because the width is fixed, there will be a blank space in the middle, and it will be large and small. At this time, set the width to the parent container, and set the subcomponent display: inline-block; to realize the function of dynamically displaying the ellipsis.

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