实现效果:

css:

    position: relative;
line-height: 20px;
max-height: 60px;

js:

function overflowHiddon(el) {
var s = el.textContent|| el.innerText;
var n = el.offsetHeight;
console.log(n);
for(var i=0; i<s.length; i++) {
el.innerHTML = s.substr(0, i);
if(n < el.scrollHeight) {
el.style.overflow = 'hidden';
el.innerHTML = s.substr(0, i-3) + '...';
break;
}
}
} var text = document.getElementsByClassName("text");
for (var i = 0; i < text.length; i++) {
overflowHiddon(text[i]);
};

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

  1. CSS 多行文本溢出省略显示

    文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专 ...

  2. 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或 ...

  3. 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

  4. js实现单双行文本溢出添加省略号

    # 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...

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

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

  6. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  7. css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

  8. CSS单行、多行文本溢出显示省略号(……)解决方案

    单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...

  9. CSS实现单行、多行文本溢出显示省略号(…)

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

随机推荐

  1. 在BootStrap的modal中使用Select2

      bootstrap 3 $.fn.modal.Constructor.prototype.enforceFocus = function() {}; bootstrap4 $.fn.modal.C ...

  2. 在Linux添加定时任务删除5天前的日志文件

    利用shell脚本自动清理,脚本如下 1.删除文件命令: find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 实例命令: fin ...

  3. Web重温系列(二):SQLite+EF6实现本地化存储

    本来我们的产品有着复杂的层次结构,作为客户端的C# WinForm是不操作数据库的.但是最近有个需求,需要将数据本地保存.可选的方案很多,比如文本文件或者XML序列化和反序列化,或者如access.d ...

  4. Deseq2 的可视化策略汇总

    1) MA图   对于MA图而言, 横坐标为该基因在所有样本中的均值,basemean = (basemean_A + basemean_B ) / 2, 纵坐标为 log2Fold change 其 ...

  5. windows环境下redis启动加到服务中

    前置条件: 1.命令运行在redis-server.exe目录下  2.cmd命令  安装命令: redis-server.exe --service-install redis.windows.co ...

  6. Python代码转换为exe可执行程序详解

    1:安装pyinstaller pip install pyinstaller 2,制作exe 1,先写一个hello.py print('hello world!') input() 2.执行(在s ...

  7. 利用PowerShell监控Win-Server性能

    Q:如何系统层面的去监控一下Windows Server? A:额……一时间的话……能想到的可能也就是PowerShell+SQL Server+job,试试. 1.关于PowerShell 2.Po ...

  8. python中的pymongo连接脚本

    author: headsen chen date: 2019-04-12  17:39:12 先安装python3,pymongo [root@localhost mnt]# cat /root/p ...

  9. poj 1269

    水题.判断两条直线位置关系. 考虑平行的情况,那么 四边形的面积会相等,重合的话,四边形的面积相等且为0. 除去这两种就一定有交点. #include <cstdio> #include ...

  10. oracle按时间创建分区表

    首先明确分区表和表分区的区别:表分区是一种思想,分区表示一种技术实现.当表的大小过G的时候可以考虑进行表分区,提高查询效率,均衡IO.oracle分区表是oracle数据库提供的一种表分区的实现形式. ...