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 ...
随机推荐
- hdoj:2051
#include <iostream> #include <string> #include <vector> #include <algorithm> ...
- 通过动态SQL语句创建游标
DECLARE @sql varchar(100); DECLARE @TableName varchar(32); DECLARE @FieldName varchar(32); DECLARE @ ...
- Linux服务器性能分析与调优
一 linux服务器性能查看 1.1 cpu性能查看 1.查看物理cpu个数: cat /proc/cpuinfo |grep "physical id"|sort|uniq|wc ...
- 省市区联动,非ajax请求。
需求 不允许用 ajax 请求的方式加载数据,所以把所有的省市区写在数组里,用js动态加载. 数据源 民政部门户网站:http://www.mca.gov.cn/article/sj/xzqh/201 ...
- spring学习笔记-AOP
1.aop:aspect oriented programming 面向切面编程 2.aop在spring中的作用: 提供声明式服务(声明式事务) 允许用户实现自定义切面 3.aop:在不改变原有 ...
- 10.30 rest_framework总结
2018-10-30 20:25:23 终于学完了rest_framework 这个框架! 这个框架有一些基本组件!最重要的就是看源码!要一个类一个类的去找!按顺序! 并且要自己配置类的时候要先看源 ...
- K - Popular Cows
来源poj2186 Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= N ...
- 阿里天池的新任务(简单)(KMP统计子串出现的次数)
阿里“天池”竞赛平台近日推出了一个新的挑战任务:对于给定的一串 DNA 碱基序列 tt,判断它在另一个根据规则生成的 DNA 碱基序列 ss 中出现了多少次. 输出格式 输出一个整数,为 tt 在 s ...
- node 把文件封装一层文件夹
把 pages 下面的单个js文件,封装上一个文件夹 var glob = require("glob"); const fs = require("fs-extra&q ...
- word-break和word-wrap的使用和区别
问题起源: 中文是一个字就是一个单词,而英文字母要有一个空格才将他们分割为一个单词:文字换行没事,主要是英文 <!DOCTYPE html> <html> <head&g ...