【JavaScript】多行文本省略，并且判断是否需要省略。

前言：文本超出省略使用率非常高，不但可以省空间，也可以使页面看起来更加简洁。

一、单行省略

p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

单行省略很简单。

二、多行省略

<body><style>div {width:200px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}</style><div>这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。</div>
</body>

这时就可以实现多行文本显示了。

该效果是通过弹性盒模型来实现的，这就要注意兼容性方面的问题了。

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertival; 设置或检索伸缩盒对象的子元素的排列方式。值vertival为（从上向下垂直排列子元素）;
-webkit-line-clamp:2; 块元素显示的文本的行数。

①、 display:box; 要加上浏览器前缀，兼容性还是可以的。例如：

display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -o-box;
display : box;

②、box-orient: vertical; 也要加上浏览器前缀。

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-o-box-orient: vertical;
box-orient: vertical;

支持情况

③、-webkit-line-clamp的兼容性就会差一些了

IE、Firefox并不兼容该属性，不过在移动端主流浏览器方面的兼容性还是蛮不错的。

三、检测是否需要省略

  var oDiv = document.querySelector('div');if (oDiv.scrollHeight > oDiv.clientHeight) {console.log('有省略号');}/*clientHeight：元素客户区的大小，指的是元素内容及其边框所占据的空间大小（大多是视口大小）scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）offsetHeight: 偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距）*/

通过比较标签元素的scrollHeight 和 clientHeight 可以得出有没有超出省略。可以在元素后面添加一个“更多”按钮，点击展开被省略的信息。这个也是现在很多网页在用的功能。

四、兼容多行省略

<body><style>.box { position:relative; width:200px; line-height:20px; }.box .text { width:100%; height:40px; overflow:hidden; }.box .text-ellipsis::after { position:absolute; bottom:0; right:0;content:'...';line-height:20px; background:#fff; }</style><div class="box"><div class="text">这是测试的语句。这是测试的语句。</div></div><div class="box"><div class="text">这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。</div></div><script>var aDiv = document.querySelectorAll('.text');for(var index = 0,len = aDiv.length; index<len; index++){var oDiv = aDiv[index];if (oDiv.scrollHeight > oDiv.clientHeight) {oDiv.classList.add('text-ellipsis');}}</script>
</body>

运行结果：

【JavaScript】多行文本省略，并且判断是否需要省略。相关推荐

JavaScript如何简单而准确地判断复杂数据类型
javaScript如何简单而准确地判断复杂数据类型? 1:typeof 只能判断出基本数据类型例如: var a = 3; typeof a 的结果为 number var b = []; typ ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断...
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
javascript中对变量类型的判断
在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined,Null,Boolean, Number和String:复杂数据类型是Object,Object中还 ...
javaScript使用三目运算进行判断
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript中,除了 if ... else 和 switch 语句,还有一个唯一的三目运算符 ? ... : ,也 ...
JavaScript 中的this的简便判断
this 我这里总结一下规律一般 function 函数谁调用指向谁箭头函数的this指向是和同级的this指向相同也就是说,在箭头函数上方打印this 就可以判断this的指向 bind ap ...
JavaScript基础知识（三个判断、三个循环）
三个判断 if-else-只会执行其中一个条件如果if条件中只有一个值,那么会默认转布尔: if(1=="1"){ // 当括号中条件为true时,执行此处的代码 console ...
JavaScript PHP 通过URLEncode字串判断其编码是UTF-8还是GBK
例如给出字串: %B4%BA 或 %E6%98%A5 如何判断应该是使用UTF-8还是GBK进行URLDecode? 思路1 通用方法: 假定它是 GBK 的编码 ,则将其转换成 utf-8 然后再转 ...
javascript输入某年月某日，判断是这一年的多少天
//输入某年月某日,判断是这一年的多少天 function getDay(year,month,day){var days = day;//如果是一月的话,直接返回天数dayif(month === ...
Android TextView 如何判断是否已经省略
我们知道,要使TextView单行显示,如果超出的话用"-"显示,只要设置 android:ellipsize="end" android:singleLine ...
30、JavaScript的基本类型和引用类型的判断方法
一.常见的基本数据类型和引用数据类型 1.基本数据类型:Number.String.Boolean.Null.undefined.基本数据类型,名字和值都会储存在栈内存中. 2.引用数据类型:Obje ...