实现效果:

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. Altium Designer学习---如何进行SI仿真

    Altium designer 如何进行SI仿真. 1.仿真电路中需要至少一块集成电路: 2.器件的IBIS模型: 3.在规则中必须设定电源网络和地网络: 4.建立SI规则约束: 5.层堆栈必须设置正 ...

  2. JavaScript学习历程03

    一闪一闪亮晶晶 <script type="text/javascript"> var nn = Number(prompt('请输入一个1-9的正整数!')); va ...

  3. phpmyadmin 上传超过50m限制

    sql文件太大(达到400m),导致无法正常导入.需要修改php,nginx的配置文件 php.ini配置 post_max_size = 500M upload_max_filesize = 500 ...

  4. js 零散知识总结

    网页播放声音 这个非常简单,我们只需要在html和js设置即可.首先看html代码 html代码 <audio id="sound" autoplay="autop ...

  5. Python的安装以及编译器的安装

    首先要想写python语言,要安装并配置python的环境,点击python下载即可,当然需要看下自己电脑适合下载的版本,64位还是32位的即可. 安装一般情况安装在C盘即可,选择添加变量的配置,完成 ...

  6. 宣布推出针对 Microsoft OneDrive 和 SharePoint 的 Autodesk AutoCAD 新集成

    在 OneDrive 和 SharePoint,我们的愿景是随时随地为你的团队提供简单而安全的文件访问.无论你的职位.专业或行业是什么,我们将始终致力于扩展和连接你最重视的内容.今天,我们发布了与 A ...

  7. JavaSE assert断言的学习

    在Java中,assert关键字是从JAVA SE 1.4 引入的,为了避免和老版本的Java代码中使用了assert关键字导致错误,Java在执行的时候默认是不启动断言检查的(这个时候,所有的断言语 ...

  8. Linux ReviewBoard安装与配置

    目录 0. 引言 1. 安装步骤 2. 配置站点 2.1 创建数据库 2.2 开始安装 2.3 修改文件访问权限 2.4 Web服务器配置 2.5 修改django相关配置 正文 回到顶部 0. 引言 ...

  9. mysql中的事物处理

    首先,事物的概念,保证一组sql语句操作的完整性,在这个过程中要充分考虑到多用户同时访问数据库数据的情况. 关键词有COMMIT,ROLLBACK,,START TRANSACTION

  10. Butterknife 导入项目配置

    在app的 build.gradle 文件中添加 dependencies { // Butterknifeapi 'com.jakewharton:butterknife:8.6.0'annotat ...