CSS单行,多行文字变省略号（...）

单行

你需要操作的DOM{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

多行

p{
position: relative; 
line-height: 20px; 
max-height: 40px;
overflow: hidden;
}
p::after{
content: "...";
position: absolute; 
bottom: 0; right: 0; 
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

or

.text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical；
    overflow: hidden;
    text-overflow: ellipsis;
}