CSS文本省略显示

当页面上有过多文字的时候,往往需要省略显示,CSS可以很方便的做到这点。

单行文本省略显示

1
2
3
4
width: 68%; // 需要固定一个宽度
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行文本省略显示(适用于WebKit浏览器和移动端)

1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 设置需要显示的行数
overflow: hidden;