js隐藏省略文字特效

 

 

	(function(){
		var o = document.getElementById("hutia");
		var s = o.innerHTML;
		var span = document.createElement("span");
		var a = document.createElement("a");

		span.innerHTML = s.substring(0,100);
		a.innerHTML = s.length > 100 ? "...展开" : "";
		a.href = "###";
		a.onclick = function(){
			if(a.innerHTML == '...展开'){
				a.innerHTML = "...收起";
				span.innerHTML = s;
			}else{
				a.innerHTML = "...展开";
			   	span.innerHTML = s.substring(0,100);
			}
		};

		o.innerHTML = "";
		o.appendChild(span);
		o.appendChild(a);

		
	})(jQuery);

  

<div id="hutia">
	这没事就懒洋洋闲逛的我 迎面驶来了28的永久自行车 我脚下的鞋很破了 可是回力这个牌子还是不错
	小卖店的电视机里在播 白娘子和许仙在唱歌 千年等一回 我无悔啊 这就是80后简单的生活 你一定不要忘记了 随着时间慢慢的推移 这一切都离我们远去
	以前十块钱就能买的东西 现在一定要出动席 现在人们都彼此不相信 在彼此伤害着对方的心 小时候的回忆 已不再清晰 云残风呼啸 岁月催人老
	只为这一杯 能不哭也不笑 时间难倒回 无人再陪我来醉 那是我的爱啊 一去不再回 无尽的虚伪 无尽的憔悴 无尽的醉了 无尽的眼泪 我的爱呀
	是我的轮回 你的爱呀 换不回 无尽的虚伪 无尽的憔悴 无尽的醉了 无尽的眼泪 我的爱呀 是我的轮回 你的爱呀 换不回

	呐……呐……呐……呐……呐…… 这没事就懒洋洋闲逛的我 迎面驶来了28的永久自行车 我脚下的鞋很破了 可是回力这个牌子还是不错
	小卖店的电视机里在播 白娘子和许仙在唱歌 千年等一回 我无悔啊 千年等一回 我无悔啊 无尽的虚伪 无尽的憔悴 无尽的醉了 无尽的眼泪 我的爱呀
	是我的轮回 你的爱呀 换不回 RAP~ 挠一挠二挠金桥， 金桥底下裂瓜瓢， 裂什么裂，猪八戒， 猪什么猪，耗子哭， 耗什么耗，儿马尿，
	儿什么儿，张家屯， 张什么张，五杆枪， 五什么五，牛屁肚， 牛什么牛，嘎蛋球， 嘎什么嘎，燕燕瓦， 燕什么燕，扯几把蛋， 扯什么扯，孙老戈，
	孙什么孙，吕洞宾， 吕什么吕，刷锅底， 刷什么刷，豆腐渣。 不要忘记我们的回忆，不要忘了我们的梦~ 不要忘记我们的回忆，不要忘了我们的梦~
	不要忘记我们的回忆，不要忘了我们的梦~
</div>

 

 

注意需要把JS代码写在HTML之后