DIV内容超出固定宽度部分用省略号代替

方法一: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;  
    }
posted @ 2015-11-30 14:44  zhαojh  阅读(1941)  评论(0编辑  收藏  举报