一、单行溢出
1、text-overflow方法
前提条件：必须有宽度
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: no-wrap;
2、margin负值定位法--兼容所有主流浏览器（张鑫旭大神的方法）
原理：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。
// html部分
<div class="test2">
<div class="zxx_con">这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
<div class="zxx_dotted">…</div>
</div>
//CSS部分
.test2 {
border: 1px solid #cfcfcf;
width: 24em;
height: 4em;
}
.test2>.zxx_con {
float: left;
height: 4em;
margin-right: 1em;
overflow: hidden;
}
.test2 > .zxx_dotted{
width: 1em;
height: 4.1em;
float: right;
margin-top: -4em;
}
二、多行溢出
1、使用-webkit-line-clamp
适用范围：只适用于Webkit内核的浏览器及移动端。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
其中，-webkit-line-clamp用来限制在一个块元素显示的文本的行数，为实现效果，有两个必须结合的属性：
（1）display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 。
（2）-webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式
2、jQuery限制字符字数方法
直接上代码：
// HTML 部分
<div class="box">
君不见黄河之水天上来，奔流到海不复回。 君不见高堂明镜悲白发，朝如青丝暮成雪 。人生得意须尽欢，莫使金樽空对月。
</div>
//CSS部分
.box{
width: 400px;
margin: 100px auto;
border: 1px solid #cfcfcf;
}
// JS部分
$(document).ready(function(){
$(".box").each(function(){
var maxwidth = 20;
content = $.trim($(this).text()); //去除文本前后的空格
if(content.length > maxwidth){
$(this).text(content.substring(0, maxwidth));
$(this).html($(this).html()+'...');
}
});
});
