jquery 设置文本溢出隐藏_超详细的文本溢出添加省略号。。。。

超详细的文本溢出添加省略号。。。。

前言
　　需求：富文本溢出隐藏，超出用省略号表示。
　　博主：文本溢出倒是做过不少，这富文本溢出什么鬼？老夫今天就好好研究一下这个省略号。
　　ps：富文本溢出，不也是文本溢出么？空格处理？多段落？正文
1.css写法
　　1.1最简单的省略号（单行，溢出隐藏）
p{
overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
}
　　效果：

1.2 多行省略号
p{
display: -webkit-box; -webkit-box-orient: vertical;
/*设置省略号在容器第四行文本后*/
-webkit-line-clamp: 4;
overflow: hidden;
}
效果如下：

局限性：使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp
　　因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
　　-webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。
　　将height设置为line-height的整数倍，防止超出的文字露出。
1.3多行省略号进阶版：
p{ position:relative; line-height:1.4em; /*设置容器高度为3倍行高就是显示3行*/ height:4.2em; overflow:hidden; } p::after{ content:'...'; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 35px; background:#fff;
/*可加可不加，就是在省略号之前加模糊，效果图为没加*/
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
效果：

原理：
　　在右下角生产一个表示省略号的伪元素，绝对定位到指定宽高的容器右下角，实现多行溢出点点点。　　适用范围广泛，多浏览器兼容，不过不可表示富文本溢出

2.js实现超出文本省略号

方法一：多浏览器兼容，可表示富文本的文本溢出。
　　2.1.clientHeight、scrollHeight
　　首先熟系入几个属性：ScrollTop、ScrollHeight、ClientHeight、OffsetHeight
　　想搞懂这几个的请移步：https://github.com/iuap-design/blog/issues/38
　　最后附上这些属性的详细解释的文档：

• clientHeight
• offsetHeight
• offsetTop
• scrollHeight
• scrollTop

　其实我们就用到两个，clientHeight、scrollHeight，哈哈，想不到吧。
clientHeight你可以简单的理解为元素的总的高度，当然也包括overflow样式属性导致的视图中不可见内容
scrollHeight为元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。不包括overflow样式属性导致的视图中不可见内容　　2.2 代码
<div id="aboutUs-content">在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。 都不用我安利VS code，大家就会乖乖的去用，无数个大言不惭的攻城狮，都被VS code比德芙还丝滑的强大功能所折服。 我是来给大家安利插件的，想做个比较全面的插件集合给大家。网上的我也看过一些，但是都比较零散，时间也久了一些，我结合最近的情况，总结一下 造福大家，才是我想做的。手动比心❤。</div>
//js代码,获取元素的clientHeight、scrollHeight，当clientHeight < scrollHeight时，发生了溢出，
let clientHeight = document.getElementById('aboutUs-content').clientHeight
let scrollHeight = document.getElementById('aboutUs-content').scrollHeight
console.log(clientHeight)
console.log(scrollHeight)
if (clientHeight < scrollHeight) {
　　console.log('发生了文字溢出')
/*我们可以在这里，为元素后面添加省略号，或者用vue项目的v-if显示出省略号*/
}

方法二，使用插件
1. Clamp.js
var module = document.getElementById("clamp-this-module"); $clamp(module, {clamp: 3});
2. jQuery.dotdotdot
$(document).ready(function() { $("#wrapper").dotdotdot({ // configuration goes here }); });
方法三：其他大神的做法：
多行溢出隐藏显示省略号功能的JS实现
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)

结尾
　　富文本溢出是一个坑，它里面有时会有多个段落等等。最好用js的方法。兼容多浏览器。
　　看到这里的你，有没有更好的办法解决富文本溢出呢？假如富文本中有图片，需要判断富文本只有文字溢出时添加省略号，这又如何是好？

欢迎大家关注公众号，不定时干货，只做有价值的输出
作者：Dawnzhang
出处：https://www.cnblogs.com/clwydjgs/p/10311768.html
版权：本文版权归作者
转载：欢迎转载，但未经作者同意，必须保留此段声明；
小舟从此逝，江海寄余生。 --狐狸