前言

　　需求：富文本溢出隱藏，超出用省略號表示。

　　博主：文本溢出倒是做過不少，這富文本溢出什麽鬼？老夫今天就好好研究一下這個省略號。

　　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實現超出文本省略號

　　方法一：多瀏覽器兼容，可表示富文本的文本溢出。

　　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
版權：本文版權歸作者
轉載：歡迎轉載，但未經作者同意，必須保留此段聲明；

超詳細的文本溢出添加省略號。。。。