实现效果:

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. vue实例-转载

    http://blog.csdn.net/yuanyuanispeak/article/details/73526795

  2. linux下反编译android apk

    1.所需要的工具 1)apktool,功能:反编译出apk所需要的资源文件和布局设置文件等, 下载地址:https://code.google.com/p/android-apktool/downlo ...

  3. Oracle中查看所有表和字段

    获取表字段: select * from user_tab_columns where Table_Name='用户表' order by column_name 获取表注释: select * fr ...

  4. Xilinx 学习笔记1---新建工程和创建源代码文件

    最近终于有空可以记录一些之前学习的内容,本博客系列记录笔者Xilinx ISE学习之旅,当然现在Vivado是学习热门,一步一步来.搞定 ISE,Vivado上手也会很快. 1.安装软件 软件部分的下 ...

  5. kafka性能测试

    参考阿里中间件团队博客的博文 Kafka vs RocketMQ——多Topic对性能稳定性的影响 使用的测试工具为Jmeter

  6. Oracle 11G 安装文档

    一. 将文件win32_11gR2_database_1of2.zip和win32_11gR2_database_2of2.zip解压. 注意:这两个文件解压到同一个目录下,即:将Components ...

  7. 【AI】PaddlePaddle-Docker运行

    1.参考官方安装Docker环境,使用一键安装包安装 https://www.jianshu.com/p/b2766173d754 http://www.paddlepaddle.org/docume ...

  8. 使用react-navigation提示undefind is not a function

    在学习react-natrive的时候,看到导航跳转一章,遂试了一下demo: 但是呢,在安卓模拟器上却报错了: 找了许多方法,包括降低版本都不行,后来修改了一下导出就可以了:

  9. Relation Extraction中SVM分类样例unbalance data问题解决 -松弛变量与惩罚因子

    转载自:http://blog.csdn.net/yangliuy/article/details/8152390 1.问题描述 做关系抽取就是要从产品评论中抽取出描述产品特征项的target短语以及 ...

  10. ZooKeeper-3.3.4集群安装配置

    https://blog.csdn.net/shirdrn/article/details/7183503