方法一:CSS控制溢出文本 只针对DIV单行数据展示
/** DIV文本超出宽度部分用...替换,鼠标移上显示全部 **/ .textAuto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .textAuto:hover{overflow:visible;text-overflow:ellipsis;white-space:normal;}
结合上面CSS样式(需要屏蔽.textAuto:hover样式) 如果文本宽度超出DIV宽度 鼠标移上去用Title形式显示全部内容几秒钟
$('.textAuto').live("mouseover", function() { if (this.offsetWidth < this.scrollWidth) { $(this).attr("title", $(this).text()); } });
方法二: JS控制字符长度
var content = "DIV内容溢出只显示多少字节,多余部分用...代替";
var numCnt = content.gblen(); var elseCont=''; if(parseInt(numCnt)>=72){ elseCont = content.gbelse(72); //多余部分文本
content = content.gbstr(72)+"..."; //展示出来文本 }
<div style="padding-top:0px;" class="test test2">
<p class="p">'+展示部分文本+'</p>
<p class="mytext" style="display:none;">'+多余部分文本+'</p>
</div>';
$('.test').live("mouseover", function() {
$(this).children('.p').text($(this).children('.p').text().replace('...',''));
$(this).children('.mytext').show();
});
$('.test').live("mouseout", function() {
$(this).children('.p').text($(this).children('.p').text()+'...');
$(this).children('.mytext').hide();
});
考虑到DIV文本内容可能有数字字母汉字混合,字节长度不同就会影响计算文本对应DIV宽度 1个汉字长度=2个字母长度=2个数字长度
//返回字符的[字节]长度 1个汉字=2个字节长度 列表DIV文本溢出时用来判断字符(中英混合)长度 String.prototype.gblen = function() { var len = 0; for (var i=0; i<this.length; i++) { if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) { len += 2; } else { len ++; } } return len; } //根据非汉字[字节]长度标准 返回--指定长度的字符 String.prototype.gbstr = function(size) { var len = 0; var str = ""; for (var i=0; i<this.length; i++) { if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) { len+=2; str+=this[i]; } else { len++; str+=this[i]; } if(len>=size){ return str; } } return str; } //根据非汉字[字节]长度标准 返回--指定长度后剩余的字符 String.prototype.gbelse = function(size) { var len = 0; var str = ""; for (var i=0; i<this.length; i++) { if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) { len+=2; if(len>size){ str+=this[i]; } } else { len++; if(len>size){ str+=this[i]; } } } return str; }