12.css单行和多行文本的溢出处理

https://www.onmpw.com/tm/xwzj/web_15.html

今天在做网页时，看到设计图上有 .....  ，又碰到一个问题，如何实现呢？使用js截取吗？太麻烦了，旁边的同事说：“可以用css3实现”，于是看手册，在网上搜集资料，这个问题终于解决了，在此想把这个结果分享给网友，望大家共勉。

文本溢出分为：
 

1.单行文本溢出 多用于文章列表标题
 

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

实现的效果：

2.多行文本溢出 多用于文章列表详情简介
 

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

实现的效果：（这个是移动端的）
 

由于这是用css3实现的，当然不会兼容所有的浏览器，其中兼容的浏览器IE9,IE10，火狐，谷歌。