js实现多行文本溢出省略
实现效果:

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实现多行文本溢出省略的更多相关文章
- CSS 多行文本溢出省略显示
文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专 ...
- 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或 ...
- 【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或优雅地实 ...
- js实现单双行文本溢出添加省略号
# 单双行文本溢出省略 ``` // 2. 当内容过多的时候,单行省略号: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
随机推荐
- [微信小程序] 通过快速启动demo分析小程序入门关键点
(1)小程序基础结构 下图是在开发者工具通过快速启动模式创建的小程序的目录结构 可以看到,小程序中主要包含有4中类型不同的文件 .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模 ...
- 磁盘 I/O 优化
磁盘 I/O 优化 1. 性能检测 我们的应用程序通常都需要访问磁盘系统,而磁盘 I/O 通常都很耗时, 要判断 I/O 是否是一个瓶颈,有一些参数指标可以参考. 我们可以压力测试应用程序看系统的 I ...
- [转]springboot2 webflux 响应式编程学习路径
原文链接 spring官方文档 springboot2 已经发布,其中最亮眼的非webflux响应式编程莫属了!响应式的weblfux可以支持高吞吐量,意味着使用相同的资源可以处理更加多的请求,毫无疑 ...
- bootstarpTable load data
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> ...
- springmvc date
数据格式化,从本质上讲属于数据转换的范畴.Spring就是基于数据转换框架植入“格式化”功能的. 在数据转换时我们进行了如下配置: 我们使用的是ConversionServiceFactoryBean ...
- swoole Tcp服务器
基础代码 <?php //创建Server对象,监听 127.0.0.1:9501端口 $serv = ); //监听连接进入事件 $serv->on('connect', functio ...
- Timer和时间调度
Timer作为JDK提供的util工具,不太适合作为周期调度任务,只适合简单的定时操作(按照一定时间频率出发任务),在java的领域解决方案中,Quartz无疑是翘楚. Timer的调度方法有: pu ...
- 振兴中华(dfs or dp )
小明参加了学校的趣味运动会,其中的一个项目是:跳格子. 地上画着一些格子,每个格子里写一个字,如下所示:(也可参见p1.jpg) 从我做起振 我做起振兴 做起振兴中 起振兴中华 比赛时,先站在左上角的 ...
- 飞机躲避炮弹---java
最近闲来无事,花了一天多的时间写了一个小游戏,虽然说游戏本身很无聊吧,但是自己也从这个过程中学到了许多东西...分享一下. 代码内容自行理解吧... 层次结构: package cn.sxt.game ...
- js运用4
---恢复内容开始--- 1.函数 关键字function 复习 var 是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. var可以在内存模块提前(js代码执行 ...