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);

}

溢出文本省略号的js实现的更多相关文章

  1. 溢出文本省略号表示的css实现及polyfill

    需求经常有需要对文字溢出进行处理,通常是在文字显示部分的末尾添加“...”等.如下:

  2. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  3. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  4. css如何实现多行文本时,内容溢出,出现省略号

    一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...

  5. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  6. CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  7. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  8. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  9. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

随机推荐

  1. / Vijos / 题库 / 1622 / 文件查找(HOI)

    / Vijos / 题库 /1622/文件查找(HOI) 描述 WINDOWS是一个很庞大的操作系统(当然啦,看占的硬盘空间就知道了),比如说,它的文件查找系统.现在,请你用PASCAL或者C或者C+ ...

  2. POJ3278——Catch That Cow

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 114140   Accepted: 35715 ...

  3. uva 12108 Extraordinarily Tired Students (UVA - 12108)

    算法完全转载...原博客(https://blog.csdn.net/u014800748/article/details/38407087) 题目简单叙述 题目就是一堆学生他们有清醒的时候和昏迷的时 ...

  4. CF36E Two Paths (欧拉回路+构造)

    题面传送门 题目大意:给你一张可能有重边的不保证联通的无向图,现在要在这个图上找出两条路径,恰好能覆盖所有边一次,根据边的编号输出方案,无解输出-1 一道很不错的欧拉路径变形题 首先要知道关于欧拉路径 ...

  5. Django REST framework 渲染器、版本

    渲染器.版本: # settings.py REST_FRAMEWORK = { "DEFAULT_RENDERER_CLASSES": [ "rest_framewor ...

  6. 【codeforces 758D】Ability To Convert

    [题目链接]:http://codeforces.com/contest/758/problem/D [题意] 给你一个n进制的数k; 问你它可能的最小的十进制数是多少; [题解] 从右往左; 获取数 ...

  7. [POJ2104] 区间第k大数 [区间第k大数,可持久化线段树模板题]

    可持久化线段树模板题. #include <iostream> #include <algorithm> #include <cstdio> #include &l ...

  8. poj3233 题解 矩阵乘法 矩阵快速幂

    题意:求S = A + A2 + A3 + … + Ak.(mod m) 这道题很明显可以用矩阵乘法,但是这道题的矩阵是分块矩阵, 分块矩阵概念如下:当一个矩阵A中的单位元素aij不是一个数值而是一个 ...

  9. hdu_1049_Climbing Worm_201311061331

    Climbing Worm Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  10. Linux环境变量设置中配置文件分析(/etc/profile,~/.bashrc等)(转)

    说明:在研究中发现,对于不同版本的Linux系统有着不同的文件,但是总的入口是不变的/etc/profile,下面只是展示加载顺序的研究过程,所以会有些系统没有这个文件等问题. 一.配置文件与作用域: ...