text-overflow:-o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
用这几行代码可以设置出后面的省略号
如果出现这种情况
下面有字露出，可以加上line-height:20px;
这样就好了
-webkit-line-clamp：<number> number用于显示的行数用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性
display: -webkit-box：必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient： 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。默认是水平的，当值设为vertical时为垂直排列
text-overflow：可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
1.text-overflow 属性规定当文本溢出包含元素时发生的事情。
text-overflow有三个属性：
clip|ellipsis|string;
| 值 | 描述 | 测试 |
|---|---|---|
| clip | 修剪文本。 | 测试 |
| ellipsis | 显示省略符号来代表被修剪的文本。 | 测试 |
| string | 使用给定的字符串来代表被修剪的文本。 |
这个还有带有hover效果的text-overflow:具体效果代码看http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow_hover
2.
display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前
缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。
不考虑IE浏览器的话，PC端上使用哪个都可以，一般使用display:flex；移动端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex两个都支持