实现效果:

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. Safari 3D transform变换z-index层级渲染异常的研究

    by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5569 一.Safari是新时代的IE6 在2年前介绍currentColor变量 ...

  2. 【ERROR】no matching function for call to 'std::basic_ifstream<char>::basic_ifstream

    错误记录:QT中使用 no matching function for call to 'std::basic_ifstream<char>::basic_ifstream(QString ...

  3. tiny png

    golang package main import ( "encoding/base64" "fmt" "os" "net/ht ...

  4. 在windows上搭建SSH服务踩过的坑

    前两天安装了windows操作系统,想在windows上做内网穿透,所以就想在windows下启用ssh服务,今天就来讲一下我在搭建ssh服务中遇到的坑. 我显示在Mac下搭建了ssh服务,并且测试通 ...

  5. 写在开始前---ajax中的会话过期与重新登录

    一般情况下,点击<a>链接或浏览器输入url时,请求到后端,服务器判断会话是否过期.过期,重定向到登录页,或返回登录页的页面.在ajax中,返回重定向无效,这个时候就需要自己在ajax的逻 ...

  6. windows系统关闭某个端口的服务(以443端口为例子)

    1.查看443被什么服务占用 netstat -ano | findstr 443 查看到443端口被pid为5140的服务占用了 2.去到任务管理器->任务 找到PID为5140的服务,然后停 ...

  7. Gym 100712

    我的作用:增加罚时. noip380分大佬全程带飞出了10T,可惜被我搞的罚时太高了... 那啥,你会发现java代码有两种风格,嗯两个人,c++自然就是自招大佬了... A:大水题略 B:(不是我写 ...

  8. hibernate06--参数的绑定

    创建Dept实体类 以及 对应的 Dept.hbm.xml文件 /** * @author 小豆腐 * *部门的实体类 */ public class Dept { private Integer d ...

  9. 通俗bandit算法

    [原文链接] 选择是一个技术活 著名鸡汤学家沃.滋基硕德曾说过:选择比努力重要. 我们会遇到很多选择的场景.上哪个大学,学什么专业,去哪家公司,中午吃什么,等等.这些事情,都让选择困难症的我们头很大. ...

  10. 半夜两点灵光一现想出来的一个demo

    功能: 1.用户通过页面下载Excel模板,按照模板填写数据,上传Excel , 服务器解析 ,绘制成折线图.柱状图.雷达图 ....... 2.用户在线编辑数据,绘图 (没想好咋弄) 可定制需求,根 ...