CSS单行文本截断和多行文本截断的设置

单行文本截断

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

多行文本截断

p { 
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2; /* 行数 */
    -webkit-box-orient: vertical;
}

文本截断通用代码

/* 文本截断 */
.line-1{white-space:nowrap;overflow:hidden;display:block;text-overflow:ellipsis}
.line-2,.line-3,.line-4{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.line-2{-webkit-line-clamp:2}
.line-3{-webkit-line-clamp:3}