今天在做项目的过程中遇到一个问题，在这里贴出来让大神们想想更好的方法。
在显示数据时，字符串过长将截取一定长度的字符串然后加个省略号显示，可字母和汉字，大小写字母在显示时虽然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.js
var 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.js
var 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一样可显示的长度却不一样的问题，思考待续。
时间： 2024-11-05 11:54:12