文本溢出省略显示效果

记录下项目中使用的文本溢出效果，方便日后复用。

单行文本溢出省略

max-width: 120px;overflow: hidden;text-overflow: ellipsis;      //溢出省略号效果white-space: nowrap;       //设置单行显示

多行文本溢出省略

overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;          //设置超过多少行省略-webkit-box-orient: vertical;

要组合使用这两个属性

• display: -webkit-box 将对象作为弹性伸缩盒子模型显示；
• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式；

该方法适合WebKit内核浏览器，更多内容参考： CSS多行文本溢出省略显示

参考资料

CSS多行文本溢出省略显示