超出部分用省略号显示

介绍

• 一般的写法（3个属性就可以控制）

.test {
       width: 100px;//首先设置个宽度，其实不用设置，默认是自动撑开最大的宽度
       overflow: hidden; //设置超出部分隐藏
       white-space: nowrap; // 设置不让它自动换行，默认是会自动换行的
       text-overflow: ellipsis; //超出部分用省略号显示
   }

• 二班的写法 (ant design+umi项目时发现以上没有效果，使用以下就可以了)

//超出部分用省略号显示
.textOverFlow{
    display: -webkit-box;   //设置盒子模型，-webkit-box是移动端弹性盒模型
    -webkit-line-clamp: 1;  //设置显示几行
    overflow: hidden;   // 超出部分隐藏
    text-overflow: ellipsis;    //隐藏部门用省略号显示
    /* autoprefixer: off */     //这行必须要用
    -webkit-box-orient: vertical;   //设置父容器里的子容器的排列方式 垂直方向排列
    /* autoprefixer: on */  //这行必须设置
}