文本溢出显示省略号

首先用块级元素来包裹文案

单行文案显示省略号

注意点:1.超出隐藏;2.强制文案不换行

div{
 overflow:hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

　　

多行文案超过显示省略号

line-clamp控制第几行显示省略号

.clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
/*这个保证换行的时候两边对齐*/
    text-align: justify;
}
/*与单行省略相同*/
.clamp.clamp-1 {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}
/*第二行文本溢出省略号*/
.clamp.clamp-2 {
    line-clamp: 1;
    -webkit-line-clamp: 2;
}