单行省略号和多行省略号

单行省略号

这样就可以在超出容器宽度的情况下显示省略号, 如果容器没有宽度限制, 也可以加上width属性为容器增加宽度限制

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

多行省略号

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端, 其中高度不需要指定, 通过line-clamp来指定要在第几行出现省略号

#root {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}