文本溢出添加省略号，line-clamp控制文本行数

一、单行 溢出隐藏 添加省略号

p{
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

二、多行 溢出隐藏 省略号

p{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*设置省略号在容器第四行文本后*/
	-webkit-line-clamp: 4; 
	overflow: hidden;
}

局限性：
　　使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp
　　因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
　　-webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。
　　将height设置为line-height的整数倍，防止超出的文字露出。

三、多行省略号进阶版：

p{
	position:relative;
	line-height:1.4em;
	/*设置容器高度为3倍行高就是显示3行*/
	height:4.2em;
	overflow:hidden;
	/*如果你标签内的是英文，英文是不会自动换行的，所以你需要让他自动换行添加如下代码即可：*/
	word-wrap: break-word;
	word-break: break-all;
}
p::after{
	content:'...';
	font-weight:bold;
	position:absolute;
	bottom:0;
	right:0;
	padding:0 20px 1px 35px;
	background:#fff;
	/*可加可不加，就是在省略号之前加模糊，效果图为没加*/
	 background: -webkit-linear-gradient(left, transparent, #fff 55%);
	 background: -o-linear-gradient(right, transparent, #fff 55%);
	 background: -moz-linear-gradient(right, transparent, #fff 55%);
	 background: linear-gradient(to right, transparent, #fff 55%);
}

原理：
　　在右下角生产一个表示省略号的伪元素，绝对定位到指定宽高的容器右下角，实现多行溢出点点点。
　　适用范围广泛，多浏览器兼容，不过不可表示富文本溢出

四、使用插件

1. Clamp.js

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

2. jQuery.dotdotdot

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //    configuration goes here
    });
});