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 ...
随机推荐
- Java 判断字符串 中文是否为乱码
import java.util.regex.Matcher; import java.util.regex.Pattern; public class ChineseUtill { private ...
- C#.net mysql There is already an open datareader associated with this command引发的问题
[参考]There is already an open datareader associated with this command引发的问题 我在语句中并未使用 DataReader,未何也提示 ...
- 微信小程序开发--富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...
- git和github新手快速操作流程
git和github新手快速操作流程 本文主要介绍利用git版本控制将项目托管到远程仓库github上的一般性操作流程,为了给正在学习git的同学们一个小小的参考,以便更轻松的去深入学习git,本文所 ...
- MYSQL 内存模型
- Golang etcd服务注册与发现
//sevice.go package discovery import ( "context" "errors" "sync" " ...
- python基础类型—列表
列表 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’ ...
- c++课设
#include <stdio.h>#include <time.h>#include <math.h>#define C 60000;struct Student ...
- day12 十二、开放封闭、装饰器
一.nonlocal关键词 # global # num = # def fn(): # global num # L>G 将局部的名字与全局统一 # num = # fn() # print( ...
- Gym 101775B - Scapegoat - [贪心+优先队列]
题目链接:http://codeforces.com/gym/101775/problem/B Aori is very careless so she is always making troubl ...