display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。

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

如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码即可
word-wrap:break-word;
word-break:break-all;也可以使用插件
clamp.jsClamp.js的下载地址：https://github.com/josephschmitt/Clamp.js

文字溢出：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

解决firefox不支持-webkit-line-clamp属性

css中-webkit-line-clamp这个属性表示超过指定行的文本隐藏并且会在结尾加上...号，用起来十分快捷。但是该属性只支持Chrome，在IE, FireFox下都无效。
解决方案：可以用一种比较这种的方式来处理

p {
    height: 3.6em;
    font-size: 16px;
    color: #999;
    line-height: 1.8;
    overflow: hidden;
    position: relative;
    &:after {
        content: '';
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
        height: 1.8em;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    }
}

上面的代码给p元素上面添加了一个伪类。并且让这个伪类采用绝对定位，定位至文本结尾处。
超过的部分可以使用overflow:hidden隐藏。并且结果部分用一个渐变效果遮盖。

-webkit-line-clamp超过两行就出现省略号

解决firefox不支持-webkit-line-clamp属性