css实现单行和多行文本溢出显示省略号...

仗剑天涯，从你的努力开始

一、单行文本溢出显示省略号…

p{
overflow:hidden;/*溢出隐藏*/
white-space:nowrap; /*规定段落中的文本不进行换行*/
text-overflow:ellipsis;/*显示省略号，代表溢出文本*/
}

但是以上的不支持多行的溢出隐藏

二、多行文本溢出显示省略号…

div{
display:-webkit-box; 
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}

display:-webkit-box; /将对象作为弹性伸缩盒子模型展示/
-webkit-line-clamp:2;/限制在一个块元素显示的文本行数/
-webkit-box-orient:vertical;/设置或检索伸缩对象的子元素排列方式/
overflow:hidden;/溢出隐藏/
text-overflow:ellipsis;/显示省略号，代表溢出文本/

• 注意：
  -webkit-line-clamp是webkit的私有属性，是一个不太规范的属性，没有出现在css的草案当中，需要配合其他的webkit属性进行使用。
• 有可能出现编译失效问题
  -webkit-box-orient:vertical属性可能丢失
• 解决方法1 把autoprefixer关掉，注释掉

/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

• 解决方法2

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

bug来源
GitHub解决方案