【常用CSS】之CSS文本溢出显示省略号

duwenquan-方形LOGO.png

        项目中常常有这种需要我们对溢出文本进行"..."显示的操作，单行多行的情况都有，利用html新增属性可以控制网页中单行或者多行显示，达到文字长度控制，防止多文字对样式的影响！

单行：（方法一）

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

单行：（方法二）

overflow: hidden; 
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 1; 
 -webkit-box-orient: vertical;

多行：

overflow: hidden; 
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //控制行数
-webkit-box-orient: vertical;