文本省略显示

效果：

1.html

<div class="content">
	与多年不见的朋友相聚。露天咖啡厅，袅袅的咖啡香，落日映红霞，余晖洒落在我们身边，如一幅阵年遗香的挂画。
	岁月横隔在彼此间，那些遥远的念想溶入静美的年华中，时光宛如迟暮美人，盈水邀月，横笛玉音，轻纱漫舞。只是
	如花美眷，又怎敌似水流年。
</div>

2.js

	$(".contents .conts").each(function(){
		var ctn =$(this);  //获取div对象
        var content =$(this).html();                   //获取div里的内容
        var span=$("<span>"+content.substring(0,110)+"</span>");
		var as=$("<a></a>");
		as.html(content.length>110?"...":"");  判断显示的字数是否大于默认显示的字数    来设置a的显示       
		var span1=$("<span>展开</span>");
		as.append(span1);
		as.attr("href","javascript:void(0)");
		as.css({"color":"black"});
		span1.css({"color":"blue"});
		ctn.on("click",as,function(){
	        if(as.html().indexOf("展开")>0){      //如果a中含有"展开"则显示"收起"
	          as.html("<<&nbsp;收起");
	          as.css({"color":"red"});
	          span.html(content);
	        }else{
	        	var span1=$("<span>展开</span>");
	            as.html("...");
	           	as.append(span1);
	           	as.css({"color":"black"});
	           	span1.css({"color":"blue"});
	           	span.html(content.substring(0,110));
	        }
		})
		ctn.html("");
		ctn.append(span);
		ctn.append(as);
	})

转载地址：https://blog.csdn.net/erdouzhang/article/details/71105188