方法1：css本身有一個(gè)文字溢出屬性：text-overflow:ellipsis;恐疲，當(dāng)溢出后顯示點(diǎn)點(diǎn)點(diǎn)（...）
去了can i use測(cè)了一下text-overflow屬性的兼容性草则，基本上現(xiàn)在主流瀏覽器都支持潭陪。以前Fire Fox不支持雄妥，需要額外引入一個(gè)xml文件，現(xiàn)在不需要了依溯。
<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">
當(dāng)今世界日新月異老厌，新生事物層出不窮。人生卻短短百年黎炉，有限的時(shí)間面對(duì)的是無限的事物枝秤。
</div>
方法2：參照張?chǎng)涡竦膍argin負(fù)值定位法
<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" >這是一段比較長的文字，用來測(cè)試是否文字溢出時(shí)會(huì)用省略號(hào)顯示慷嗜。</div>
<div class="zxx_dotted" >…</div>
</div>
感覺東西還挺多淀弹，要是項(xiàng)目中用的多還挺麻煩，可以當(dāng)成一種思路擴(kuò)展庆械。
以上方法都不能指定文字的字符數(shù)薇溃，只能以包裹文字的元素寬度去截取。使用jq就可以實(shí)現(xiàn)缭乘，并且可以很好的復(fù)用沐序，使用時(shí)調(diào)用函數(shù)就可以了。當(dāng)項(xiàng)目中有許多地方需要用到時(shí)堕绩，可以使用jq的方法策幼。
方法3：寫函數(shù)實(shí)現(xiàn)該功能，截取特定長度的字符奴紧√亟悖【同樣參照張?chǎng)涡瘢煽创笊癫┛汀?/p>
body{
font-size: 12px;
}
<div class="zxx_text_overflow" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異黍氮，新生事物層出不窮到逊。人生卻短短百年铣口，有限的時(shí)間面對(duì)的是無限的事物。
</div>
$(document).ready(function(){
//限制字符個(gè)數(shù)
$(".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觉壶。
可以看出：是截取了特定長度（23）的字符脑题，而與包裹文字的元素寬度無關(guān)。
那么反過來呢铜靶？
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();//清除復(fù)制
wordLimit();
}else{
copyThis.remove(); //清除復(fù)制
return;
}
});
};
wordLimit();
注意：元素一定要設(shè)置固定寬度（我設(shè)的400px）叔遂，超出該寬度后就會(huì)顯示點(diǎn)點(diǎn)點(diǎn)（...）
那么將以上兩種方式結(jié)合起來寫一個(gè)jQuery插件來實(shí)現(xiàn)：截取特定字符和超過寬度顯示點(diǎn)點(diǎn)點(diǎn)（...）
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異，新生事物層出不窮争剿。人生卻短短百年已艰，有限的時(shí)間面對(duì)的是無限的事物。
</div>
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異蚕苇，新生事物層出不窮哩掺。人生卻短短百年，有限的時(shí)間面對(duì)的是無限的事物涩笤。
</div>
<div class="zxx_text_overflow1" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異嚼吞，新生事物層出不窮。人生卻短短百年蹬碧，有限的時(shí)間面對(duì)的是無限的事物舱禽。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異，新生事物層出不窮恩沽。人生卻短短百年誊稚，有限的時(shí)間面對(duì)的是無限的事物。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異罗心，新生事物層出不窮里伯。人生卻短短百年，有限的時(shí)間面對(duì)的是無限的事物渤闷。
</div>
<div class="zxx_text_overflow2" style="width:400px; margin: 20px auto; background-color: #cccccc;">
當(dāng)今世界日新月異疾瓮，新生事物層出不窮。人生卻短短百年肤晓，有限的時(shí)間面對(duì)的是無限的事物爷贫。
</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()+'...');
}
}
});
};
//調(diào)用方式：
$('.zxx_text_overflow1').wordLimit();
$('.zxx_text_overflow2').wordLimit(23);
})(jQuery);
注意：不傳參數(shù)調(diào)用時(shí)，元素一定要設(shè)置寬度补憾。
如何實(shí)現(xiàn)：多行文本超出漫萄，在最后一行顯示點(diǎn)點(diǎn)點(diǎn)（...）
.box{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
IE不支持
-webkit-box
1.png
-webkit-line-clamp支持性較差
-webkit-line-clamp就是控制行數(shù)的，是3就是顯示3行盈匾，3行結(jié)束點(diǎn)點(diǎn)點(diǎn)（...）腾务，如果是2則最多2行，第2行結(jié)束顯示點(diǎn)點(diǎn)點(diǎn)（...）削饵。
1.png
-webkit-box-orient我竟然沒有查到支持性岩瘦，可能很差未巫。
