css3 省略 |css 文件定义

/* 省略单行 */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/* 省略多行 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

上面的代码演示了两种不同的省略方式，下面分别进行讲解：

1. 省略单行

当大家需要在一行内显示过长的文本时，就可以使用省略单行的方式。具体实现就是设置text-overflow: ellipsis;来添加省略号，同时设置white-space: nowrap;让文本不换行，overflow: hidden;让超出部分隐藏。

2. 省略多行

当大家需要在多行文本中显示少量内容时，使用省略多行的方式是比较好的选择。使用这种方式，大家需要设置一个容器，然后给容器添加以下样式：

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

其中display: -webkit-box;和-webkit-box-orient: vertical;是告诉浏览器将容器内的内容按照垂直方向进行排列，-webkit-line-clamp: 3;表示只显示3行，最后overflow: hidden;隐藏超出部分。

CSS3中的省略功能可以大大简化网页的代码，使网站界面更加清新、美观。希望以上内容能对您有所帮助。