css 文本超出部分显示省略号

/* 必须固定宽度 */
.textover {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 可用于flex布局自适应宽度 */
.textover1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.textover2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.textover3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

注意！！！

上面的 textover1 ，textover2 ，textover3 有时候可能无效，加上 white-space: pre-line; 或者 white-space: pre-wrap; 即可；例如：

.textover2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-line;
}

white-space: