主要是实现当文本的长度超出一定的长度时，文本剩余的部分省略，出现展开，点击展开，文本全部显示，点击收起，文本回复省略显示。
之前文本的超出多少行省略显示主要是用到以下的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");//我是更多或者收起的domif(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" });
