在页面显示中我们经常会需要进行省略，比如简介里面的省略，比如固定div中字数超过限制之后的省略。我们可以用css轻松做到。

单行文字的省略

单行文字省略比较简单。关键代码如下：

    
春天，又称春季，是四季中的第一个季节，指立春至立夏期间，含节气有立春、雨水、惊蛰、春分、清明、谷雨

最终的效果是：

当一行中的文本不固定的时候，可以设置一个max-width，当超过这个最大宽度，就进行省略，其他的时候不省略。常见应用如：历史搜索记录里面的记录显示。

多行文字的省略

多行文字的省略可以用css来做，也可以用js来做。先来看看css的做法。

css：

多行文字的省略主要用到-webkit-line-clamp属性，主要用来限制在一个块元素显示的文本的行数。但是这个属性不规范，要实现该效果，必须结合其他外来的WebKit属性。

来看具体实现：

    
    
     feeeeeeeeeeee菲菲姐而非减肥法金额菲艾斯阿金费分解分解发黑发黄三板斧非法即使对方是反黑反腐的胜利会计法撒开了分解机菲菲姐宽带连接覅记得发分解飞机佛山飞机奥利弗降低房价大幅eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    

最终显示的效果如下：

这个省略的效果也可以用js来做：

js：

js的做法适用于最多适配多少个字符的情况，但是如果想控制显示几行的话，css的方式显然更加方便。