zoukankan      html  css  js  c++  java
  • 溢出文本省略号的js实现

    function ellipsis(element) {

      var limitWidth = element.clientWidth;

      var temp = element.cloneNode(true);

      temp.style.float = 'left'; temp.style.width = 'auto';

      element.parentNode.appendChild(temp);

      var realWidth = temp.clientWidth;

      if(realWidth >= limitWidth){

        var ellipsisText = '...';

        var str = element.innerHTML;

        str.replace(/s+/g, ' ');

        temp.innerHTML = ellipsisText;

        var s, totalWidth = 0, newHtml = '', oldHtml;

        for (var i = 0, len = str.length; i < len; i++) {

          s = str.substr(0, i); oldHtml = temp.innerHTML;

          newHtml = s + ellipsisText; temp.innerHTML = newHtml;

          totalWidth = temp.clientWidth;

          if (totalWidth > limitWidth) {

            newHtml = oldHtml; break;

          }

        }

      element.innerHTML = newHtml;

      }

      temp.parentNode.removeChild(temp);

    }

  • 相关阅读:
    2021.07.13 学习总结
    2021.07.12 学习总结
    2021.07.11 学习总结
    form表单提交失败
    url传参和解决中文乱码
    layui日期选择无效的问题
    Eclipse中快速生成Javabean的方法
    一种控制台输出效果的方法
    暑期周总结
    环境配置2
  • 原文地址:https://www.cnblogs.com/ylyw/p/7687592.html
Copyright © 2011-2022 走看看