html文本超出隐藏，展开和收起。

主要是实现当文本的长度超出一定的长度时，文本剩余的部分省略，出现展开，点击展开，文本全部显示，点击收起，文本回复省略显示。

之前文本的超出多少行省略显示主要是用到以下的css样式来控制

 text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*行数*/
    line-clamp: 2;/*行数*/
    -webkit-box-orient: vertical;

现在来实现根据文本的长度，超出省略显示
效果如下：


主要用到的是封装好的插件函数，主要代码如下：

(function($) {
				/*
				 * 使用方法：1. $("you Dom ClassName or ID").overTexts({ texts:"you need overhide text...." });//这种的初始的，不带参数的，默认参数是 20字长 且显示展开和收起的
				 * texts: "测试文本...此处省略200字...测试文本",
				 * textLength: "20", //你需要定义超过多少字，就显示收起
				 * overText: "展开",  //你需要设置的默认名称，展开 显示
				 * openText: "收起",  //你需要设置的默认名称，收起 收缩
				 * ooType: "2" //展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩 || 3显示省略号
				 * 
				 * */
				$.fn.overTexts = function(options) {
					var ooText,t1;
					var dft = {
						//初始化的参数配置
						texts: "展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩",
						textLength: "40",
						overText: "展开",
						openText: "收起",
						ooType: "2" //展开和收缩的类型， 0 不显示展开和收缩，仅为省略号 || 1 显示展开，不显示收缩 ||2 显示展开和收缩 || 3显示省略号
					}
					var opt = $.extend(dft, options);
					ooText = opt.texts;			//临时装载 数据 用于填充到data-text内的
					if (options.ooType == '0') {
						$(this).html("<div class='moreText' data-text="+opt.texts+">" + opt.texts + "</div>");
					}
					if (options.ooType == '1') {
							ooText = opt.texts;
						if (opt.texts.length > opt.textLength) {
							t1 = opt.texts.substring(0, opt.textLength) + "<a class='moreoh'   >"+opt.overText+"</a>";
						}else{
							t1 = opt.texts;
						}
						$(this).html("<div class='moreText' data-text="+ooText+">" + t1 + "</div>");
					}
					if (options.ooType == '2') {
						if (opt.texts.length > opt.textLength) {
							t1 = opt.texts.substring(0, opt.textLength) +'...'+ "<a class='moreoh' >"+opt.overText+"</a>";
						}else{
							t1 = opt.texts;
						}
						
					}
					if (options.ooType == '3') {
						if (opt.texts.length > opt.textLength) {
							t1 = opt.texts.substring(0, opt.textLength) + "...";
						}else{
							t1 = opt.texts;
						}
						
					}
					//无论何种结果，均执行此
					$(this).html("<div class='moreText' data-text="+ooText+">" + t1 + "</div>");
					//此处判断 就是 已经有展开或者收起了
					if($(this).find("a").hasClass("moreoh")){
						//事件委托，让他可以执行
						$(".moreText").on("click","a.moreoh",function(){//更多或者收起的点击事件
								var moreoh = $(this).find("a.moreoh");//我是更多或者收起的dom
							if(moreoh.context.innerText== opt.overText){//如果我此时是展开
								if(opt.ooType==2){
									t1 = opt.texts+ "<a class='moreoh' >"+opt.openText+"</a>";
									moreoh.context.innerText = opt.openText;
									$(this).parents(".moreText").html(t1);
								}else{
									t1=opt.texts;
									$(this).parents(".moreText").html(t1);
								}
								
							}
							if(moreoh.context.innerText== opt.openText){//如果我此时是收起
								t1 = opt.texts.substring(0, opt.textLength) + '...'+"<a class='moreoh'    >"+opt.overText+"</a>";
								moreoh.context.innerText = opt.overText;
								$(this).parents(".moreText").html(t1);
							}
						});
					}
					
				}
			})(jQuery);

使用如下：

 <div class="tip_txt"></div>

$(".tip_txt").overTexts({
					texts: '在Web1.0时代，由于网速和终端能力的限制，大部分网站只能呈现简单的图文信息，并不能满足用户在界面上的需求，对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及，技术可以在用户体验方面实现更多种可能，前端技术领域迸发出旺盛的生命力。',
					textLength: "50",
					overText: "展开",
					openText: "收起",
					ooType: "2" 					
				});