首页 > 代码库 > 如何实现文本超出部分使用省略号
如何实现文本超出部分使用省略号
今天在做项目的过程中遇到一个问题，在这里贴出来让大神们想想更好的方法。
在显示数据时，字符串过长将截取一定长度的字符串然后加个省略号显示，可字母和汉字，大小写字母在显示时虽然length一样可显示的长度却不一样，有什么办法可以解决截取的字符串在实际显示时都是一样的呢？先说一下文本超出部分使用省略号的方法吧。
情况一：文本超出尾部使用省略号
- css实现（此方法只能在单行文本超出部分尾部省略）
<style type="text/css">*{margin:0;padding:0;}body{padding:10px;}#test {position:relative;width:150px;height:20px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;*white-space:nowrap;overflow:hidden;}</style><body><div id="test">我要做程序员，加油加油加油加油加油加油加油加油加油</div></body> 注意：使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。需要使用对对溢出文本 显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。
通常的做法是这样的：
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;
其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；
2.jquery实现（控制显示内容块的长度可单行或多行文本超出尾部省略,此方法不区分大小写和中文）
<p id="testStr"> 这是很长的一段文本内容,测试是否能正常截取省略字符串.</p>$(document).ready(function(){ $("#testStr").each(function(i){ if($(this).text().length>25){ //给td设置title属性,并且设置td的完整值.给title属性. $(this).attr("title",$(this).text()); //获取td的值,进行截取。赋值给text变量保存. var text=$(this).text().substring(0,25)+"..."; //重新为td赋值; $(this).text(text); } }); });3.jquery实现（长度按字节区分，一个汉字两个字节，一个英文一个字节）
html<p id="testStr">这是很长的一段文本内容,测试是否能正常截取省略字符串.</p>base.jsvar Test = { subString:function(str, len, hasDot) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; //中文字符正则 var singleChar = ""; var strLength = str.replace(chineseRegex,"**").length; for(var i = 0;i < strLength;i++){ singleChar = str.charAt(i).toString(); if(singleChar.match(chineseRegex) != null){ newLength += 2; } else{ newLength++; } if(newLength > len){ break; } newStr += singleChar; } if(hasDot && strLength > len){ //hasDot为true，截字后加省略号 newStr += "..."; } return newStr; }}test.js$(function(){ var testStr = $("#testStr").text(); var Str = Test.subString(testStr,14,true); $("#testStr").text(Str);});
情况二：文本超出中间使用省略号,左右显示的文本长度相等，区分中英字符
html<p id="testStr">这是很长的一段文本内容,测试是否能正常截取省略字符串.</p>base.jsvar Test = { subString:function(str, len, hasDot) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; //中文字符正则 var singleChar = ""; var strLength = str.replace(chineseRegex,"**").length; for(var i = 0;i < strLength;i++){ singleChar = str.charAt(i).toString(); if(singleChar.match(chineseRegex) != null){ newLength += 2; } else{ newLength++; } if(newLength > len){ break; } newStr += singleChar; } if(hasDot && strLength > len){ //hasDot为true，截字后加省略号 newStr += "..."; } return newStr; }, subString2:function(str, len, hasDot) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; //中文字符正则 var singleChar = ""; var strLength = str.replace(chineseRegex,"**").length; for(var i = len;i < strLength;i++){ singleChar = str.charAt(i).toString(); if(singleChar.match(chineseRegex) != null){ newLength += 2; } else{ newLength++; } if(newLength > len){ break; } newStr = singleChar + newStr; } if(hasDot && strLength > len){ //hasDot为true，截字后加省略号 newStr = "..." + newStr; } return newStr; }}test.js$(function(){ var testStr = $("#testStr").text(); var Str = Test.subString(testStr,4,true); var Str2 = Test.subString2(testStr,4,false); $("#testStr").text(Str + Str2);});最后，关于字母和汉字，大小写字母在显示时虽然length一样可显示的长度却不一样的问题，思考待续。
如何实现文本超出部分使用省略号
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。