css3现在越来越普及了。给我们前端人员也带来了极大的便利。以前要实现让溢出的内容显示省略号还得通过js实现，现在完全可以用css代替之。

主要的代码如下：

<style type=

"text/css"> .test{-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;} </style>

<p class="test">显示不出用省略号显示不出用省略号显示不出用省略号显示不出用省略号</p>

显示效果如下：

这个属性并须要与overflow:hidden;white-space:nowrap;width:150px;一起用才会有效果！！

对于单行的我们可以用text-overflow:ellipsis;来实现，那对于多行有，有什么办法吗？？当然有！巨人的肩膀很结实的说。。

duang~duang~duang~欢迎我们的多行用省略号的方法隆重登场！

-webkit-line-clamp：***

为毛要用“-webkit-”，因为，它是一个不规范的属性，它没有出现在 CSS 规范草案中。所以，尽量只在移动端使或在WebKit浏览器用它吧。后面的***就是表示你想显示的行数，如果你想显示两行，就是2。用它的时候，还需要用到其他的webkit属性。要实现这样的效果的全部代码应该是：

 

对于更多实现让溢出内容显示省略号的方法大家可以移步至张鑫旭博客，访问如下链接即可：