实现效果:

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. js 原型链和继承(转)

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  2. saltstack在jianja模板中,执行salt函数来获取某些变量的值,并且将配置写入到配置文件中?

    问题描述: 通过saltstack的jinja模板方式,可以将变量的值写入到配置文件,即动态获取的方式.这里介绍,通过执行salt函数来获取值的方式. 演示: 1.通过在sls中,增加jinja的模板 ...

  3. python2与python3中除法的区别

    python2中的除法 >>>1/2 0 即一个整数(无小数部分的数)被另外一个整数除,计算结果的小数部分被截除了,只留下了整数部分 有时候,这个功能比较有用,譬如在做一些需要取位数 ...

  4. Docker-集群swarm(5)

     Docker集群的概念 群集是一组运行Docker并加入集群的计算机.在此之后,您继续运行您习惯使用的Docker命令,但现在它们由群集管理器在群集上执行.群中的机器可以是物理的或虚拟的.加入群组后 ...

  5. redis数据操作笔记

    redis是key-value的数据结构,每条数据都是一个键值对键的类型是字符串 注意:键不能重复,值的类型分为五种:字符串string 哈希hash 列表list 集合set 有序集合zset 一. ...

  6. nginx相关知识

    一.负载均衡与反向代理 server { listen 9008; server_name localhost; location / { proxy_pass http://web_server; ...

  7. java中的动态代理Proxy

    动态代理是java语言的一个神奇的地方,不是很好理解,下面来看看关键的地方. InvocationHandler 是一个接口,官方文档解释说,每个代理的实例都有一个与之关联的 InvocationHa ...

  8. 10.30 rest_framework总结

    2018-10-30 20:25:23 终于学完了rest_framework  这个框架! 这个框架有一些基本组件!最重要的就是看源码!要一个类一个类的去找!按顺序! 并且要自己配置类的时候要先看源 ...

  9. 6.1 Pandora 实操 - 数据收集

    添加机器 添加机器命令,在 linux 机器上执行此命令 添加成功 添加收集器 采集机器数据 解析数据 转换数据 发送数据 接着,下一步即,成功创建收集任务. 分发机器 确认收集人物,绑定到机器上. ...

  10. 强制不使用“兼容性视图”的HTML代码

    转自:http://www.weste.net/2013/8-9/93109.html 在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动 ...