文本溢出时显示‘...’

话不多说！上码

第一种方法

 

单行、多行文字溢出情况

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

////

display: -webkit-box;//display:box;box-flex是css3新添加
的盒子模型属性，它的出现可以解决我们通过N多结构、
css实现的布局方式。经典的一个布局应用就是布局的垂直等高
、水平均分、按比例划分。具体为啥用它我也没懂...留一网站
自己看http://www.warting.com/web/201402/68557.html

-webkit-line-clamp: 2;//从第2行开始溢出
显示‘...’

-webkit-box-orient: vertical;//水平排列 div 元素的子元素：

显示效果如下：

第二种方法

只适合单行文字溢出情况

white-space:nowrap;//规定段落中的文本不进行换行
text-overflow: ellipsis;
overflow:hidden;

////

overflow : hidden;//溢出隐藏不用多说

text-overflow: ellipsis;//规定当文本溢
出包含元素时发生的事情
默认值：clip（修剪文本）

ellipsis（显示‘...’）。