css文本两行显示，超出部分省略号显示

一行

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;

两行

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

四行

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;            /*设置p元素最大4行，父元素需填写宽度才明显*/
	text-overflow: ellipsis;
	overflow: hidden;
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
	/*因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作*/
	word-wrap:break-word;
	word-break:break-all;

补充：
以上方法不兼容ie，ie下出现省略号方法如下：
（1）给需要省略部分设置固定高度

p{
	line-height: 18px;
	height: 54px; /*显示三行，超出部分隐藏*/
	overflow: hidden;
    position: relative;
}

(2)设置省略号

p:after {
    content: '...';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2em;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); /*渐变颜色*/
    color: #777777;
}