单行省略号
这样就可以在超出容器宽度的情况下显示省略号, 如果容器没有宽度限制, 也可以加上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;
}