今天我在弄一个文章列表页，可是标题有的会很长于是我想可不可以超出一行就显示省略呢？答案是肯定的，现在我们看看怎么实现 ^_^
<p style="width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">这是一串好长好长好长好长好长好长好长的标题，Hello World!!! Hello World!!! Hello World!!! Hello World!!! Hello World!!! Hello World!!! 应该够长了叭？
实在不行我们再换个行？
再来……
啦啦啦来了老哥
我就是好傻好天真……
</p>效果如下：
我们看看这三个属性是干嘛用的
overflow: hidden;
// 超出的文本隐藏
text-overflow: ellipsis;
// 溢出用省略号显示
white-space: nowrap;
// 溢出不换行咦，标题是好了，可是我发现个问题，有的文章简介也长了叭……
如果只是用上面的话就只有一行了鸭… 怎么实现自己控制多少行省略呢？经过一番查找发现 css3 可以实现，一起看看
<p style="width: 100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; ">还是这个一串好长好长好长好长的简介，Hello World!!! Hello World!!! Hello World!!! 应该够长了叭？
实在不行我们再换个行？
再来…… 啦啦啦来了老哥
我就是好傻好天真……
</p>效果如下：
我们还是看看这几个属性是干嘛用的
display: -webkit-box;
// 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical;
// 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp: 2;
// 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。好啦，到这里我们的列表就实现啦…
