方法1：css本身有一个文字溢出属性：text-overflow:ellipsis;，当溢出后显示点点点（...）
caniuse_text-overflow.png
去了can i use测了一下text-overflow属性的兼容性，基本上现在主流浏览器都支持。以前Fire Fox不支持，需要额外引入一个xml文件，现在不需要了。
<style>
body{
font-size: 12px;
}
.text_overflow_ellipsis{
width:400px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<div class="text_overflow_ellipsis" style="margin: 20px auto; background-color: #cccccc">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
1.png
方法2：参照张鑫旭的margin负值定位法
<style>
body{
font-size: 12px;
}
.zxx_text_overflow {
width:24em;
height:1.3em;
overflow:hidden;
zoom:1;
}
.zxx_text_overflow .zxx_text{
float:left;
height:1.3em;
margin-right:3em;
overflow:hidden;
}
.zxx_text_overflow .zxx_dotted{
width:3em;
height:1.3em;
float:right;
margin-top:-1.3em;
}
</style>
<div class="zxx_text_overflow" style="margin: 20px auto; background-color: #cccccc;">
<div class="zxx_text" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div>
<div class="zxx_dotted" >…</div>
</div>
2.png
感觉东西还挺多，要是项目中用的多还挺麻烦，可以当成一种思路扩展。
以上方法都不能指定文字的字符数，只能以包裹文字的元素宽度去截取。使用jq就可以实现，并且可以很好的复用，使用时调用函数就可以了。当项目中有许多地方需要用到时，可以使用jq的方法。
方法3：写函数实现该功能，截取特定长度的字符。【同样参照张鑫旭，可看大神博客】
body{
font-size: 12px;
}
<div class="zxx_text_overflow" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
$(document).ready(function(){
//限制字符个数
$(".zxx_text_overflow").each(function(){
var maxwidth = 23;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0, maxwidth));
$(this).html($(this).html()+'…');
}
});
});
注意：需要引入jQuery。
1.png
可以看出：是截取了特定长度（23）的字符，而与包裹文字的元素宽度无关。
那么反过来呢？
var wordLimit=function(){
$(".zxx_text_overflow").each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible'
});
$(this).after(copyThis);
if(copyThis.width() > $(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+'…');
copyThis.remove();//清除复制
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
};
wordLimit();
注意：元素一定要设置固定宽度（我设的400px），超出该宽度后就会显示点点点（...）
1.png
那么将以上两种方式结合起来写一个jQuery插件来实现：截取特定字符和超过宽度显示点点点（...）
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
当今世界日新月异，新生事物层出不穷。人生却短短百年，有限的时间面对的是无限的事物。
</div>
(function($){
$.fn.wordLimit = function(num){
this.each(function(){
if(!num){
var copyThis = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible'
});
$(this).after(copyThis);
if(copyThis.width() > $(this).width()){
$(this).text($(this).text().substring(0,$(this).text().length-4));
$(this).html($(this).html()+'...');
copyThis.remove();
$(this).wordLimit();
}else{
copyThis.remove();
return;
}
}else{
var maxwidth=num;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0, maxwidth));
$(this).html($(this).html()+'...');
}
}
});
};
//调用方式：
$('.zxx_text_overflow1').wordLimit();
$('.zxx_text_overflow2').wordLimit(23);
})(jQuery);
注意：不传参数调用时，元素一定要设置宽度。
如何实现：多行文本超出，在最后一行显示点点点（...）
.box{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
1.png
IE不支持
-webkit-box
1.png
-webkit-line-clamp支持性较差
-webkit-line-clamp就是控制行数的，是3就是显示3行，3行结束点点点（...），如果是2则最多2行，第2行结束显示点点点（...）。
1.png
-webkit-box-orient我竟然没有查到支持性，可能很差。
