zoukankan      html  css  js  c++  java
  • 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;  
        }
  • 相关阅读:
    解析 AJAX 返回回来的 xml字符串
    JS 与 后台如何获取 Cookies
    鼠标上下滚轮事件
    MVC Control 返回各种数据
    ildasm 查看程序集 里面的图标的意思
    对象的序列化和反序列化 itprobie
    文件上传通用类 itprobie
    文件下载的四种方式 itprobie
    委托事件的实际运用 itprobie
    使用NPOI实现excel的导入导出 itprobie
  • 原文地址:https://www.cnblogs.com/zhaojinhui/p/5007130.html
Copyright © 2011-2022 走看看