前言
需求：富文本溢出隱藏，超出用省略號表示。
博主：文本溢出倒是做過不少，這富文本溢出什么鬼？老夫今天就好好研究一下這個省略號。
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;
/*可加可不加，就是在省略號之前加模糊，效果圖為沒加*/
}
效果：
原理：
在右下角生產一個表示省略號的偽元素，絕對定位到指定寬高的容器右下角，實現多行溢出點點點。
適用范圍廣泛，多瀏覽器兼容，不過不可表示富文本溢出
2.js實現超出文本省略號
方法一：多瀏覽器兼容，可表示富文本的文本溢出。
首先熟系入幾個屬性：ScrollTop、ScrollHeight、ClientHeight、OffsetHeight
想搞懂這幾個的請移步：https://github.com/iuap-design/blog/issues/38
最后附上這些屬性的詳細解釋的文檔：
其實我們就用到兩個，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
}); });
方法三：其他大神的做法：
javascript超過容器后顯示省略號效果的方法(兼容一行或者多行)
結尾
富文本溢出是一個坑，它里面有時會有多個段落等等。最好用js的方法。兼容多瀏覽器。
看到這里的你，有沒有更好的辦法解決富文本溢出呢？假如富文本中有圖片，需要判斷富文本只有文字溢出時添加省略號，這又如何是好？
歡迎大家關注公眾號，不定時干貨，只做有價值的輸出
作者：Dawnzhang
出處：https://www.cnblogs.com/clwydjgs/p/10311768.html
版權：本文版權歸作者
轉載：歡迎轉載，但未經作者同意，必須保留此段聲明；