css文本溢出出现省略号

1. 单行文本

.box{
    width:200px; /*具体宽*/
    overflow:hidden;  /*溢出隐藏*/
    text-overflow:ellipsis;  /*文本溢出显示省略号*/
    white-space:nowrap;  //文本不换行
}

2. 多行文本

/*1*/
.box{
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box; /*将对象作为弹性盒子模型显示*/
    -webkit-line-clamp:n;/*用来限制在一个块元素内显示的文本行数，这是一个不规范的属性，他未出现在css规范的草案中*/
    -webkit-box-orient: vertical; /*设置检索伸缩盒子对象的子元素的排列方式*/
}


/*2. 伪元素法*/
.box{
    width:200px;
    height:100px;
    overflow:hidden;
    position:relative
}
.box::after{
    content:'...',
    position:absolute;
    right:0;
    bottom:0; /*根据具体情况设置*/
}