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

最新推荐文章于 2023-02-17 14:41:07 发布

转载最新推荐文章于 2023-02-17 14:41:07 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaojinhui/p/5007130.html

本文介绍使用CSS和JS两种方法处理网页中DIV元素文本溢出的问题，通过CSS实现文本省略显示及鼠标悬停预览完整内容；通过JS控制字符长度，实现文字超出时的智能截断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：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;  
    }

转载于:https://www.cnblogs.com/zhaojinhui/p/5007130.html