前言

在項目開發過程中，經常會遇到溢出文本的省略問題。根據需求，可以把文本省略分為單行文本省略和多行文本省略兩類。

單行文本的省略，現在css樣式 text-overflow 已經有兼容性很好的樣式支持了。但是多行文本，目前支持webkit內核的css樣式 -webkit-line-clamp 可以做到，但它針對火狐瀏覽器就行不通了。這就是本文要解決的問題。

css解決方案（可跳過）

如果上網搜索【多行文本省略】，除了上文提到的css樣式控制，找到的答案都是做固定位置的遮蓋，而且能發現的是，目前幾乎所有的博客都是這種方法（這大概是現在互聯網技術博客的一個通病了，做原創的真的很少）。下面是這些方法的具體代碼：

方案一：webkit專屬樣式法

div { /* 對容器本身做限制 */display: -webkit-box; /* 彈性盒舊式語法 */-webkit-box-orient: vertical; /* 經過個人實測，vertical或horizontal都沒問題，只是必須設置該屬性 */-webkit-line-clamp: 2; /* 限制兩行 */overflow: hidden; } 復制代碼

方案二：css遮蓋法

p { position: relative;height: 40px;line-height: 20px; /* 限制兩行 */overflow: hidden; } p:after { /* 對文本標簽本身做限制 */content: "...";position: absolute;bottom: 0;right: 0;background-color: #fff; } 復制代碼

這種方法只能說想當然地解決問題，實際上很多時候它的效果并不理想——有時候最后的文字會“猶抱琵琶半遮面”，有時候本身文字還不夠長時就出現了，如圖：

這里是以上代碼的一個演示：css解決多行文本省略演示 代碼演示中case1無法體現效果。同樣的代碼，可以去張鑫旭大神的演示空間查看效果：-webkit-line-clamp下多行文字溢出點點點...顯示實例頁面

JS解決方案

當嘗試用css解決不通時，就應該想到用js來解決。我找了很多網上的解決方案，有提到用插件的，也有提到上文css，但真的很少有提到用js的……而且這些解決方案的特點，上文也提到了，“天下文章一大抄”，往往還不提出原博客出處。

這里提一下插件解決方案，主要是兩個。一個是基于jQuery的dotdotdot，文檔也很詳細，但是license收費呀/(ㄒoㄒ)/~~；另一個是Clamp.js，純js插件，雖然免費但是沒什么文檔，而且作者也好幾年沒更新了（這種坑就會很多了）……綜上，網上的插件都不符合我的心理預期。

好了，回到js解決方案，既然靠別人不行，那就靠自己吧。但是，用js實現文本省略最大的難點就是：如何知道哪段文本是溢出的？或者說怎么找到溢出文本并去掉？

原理探究

這里原理很簡單，就是逐個增加文本字數，比較當時字數時文本的長度是否超過容器的長度。用jQuery來寫也很簡單，但是需要一些css樣式做輔助，否則你根本達不到想要的效果。代碼貼在下面：

#container {border: 1px solid;height: 90px; width: 30px; // height 和 width 都必要/*overflow: hidden;*/overflow-wrap: break-word; // 設置文本溢出容器寬度時換行（但會溢出容器長度） } #content {line-height: 30px; // 必要，控制文本行數。否則文本會被擠壓，行數不定 } 復制代碼// jQuery 演示 var $container = $('#container') var $content = $('#container .content') var str = $content.text() if ($content.height() > $container.height()) {for (var i = 0; i <= str.length; i++) {$content.text(str.slice(0,i))if ($content.height() > $container.height()) {$content.text(str.slice(0,i-2) + "..");break;}} } //=================================================================== // 原生 JS 演示 var container = document.getElementById("container"); var content = container.firstElementChild; var str = content.firstChild.nodeValue; if (content.scrollHeight > container.offsetHeight) {for (var i = 0; i <= str.length; i++) {content.firstChild.nodeValue = str.slice(0,i);//console.log(content.scrollHeight + ":" + container.offsetHeight);if (content.scrollHeight > container.offsetHeight) {content.firstChild.nodeValue = str.slice(0,i-2) + "..";break;}} } 復制代碼

可以看出，原理是很簡單的，重點是熟悉一些基礎知識。這里貼上以上代碼的演示：js解決多行文本省略的演示

接著還有什么？

如果只是想要解決問題代碼的同學，看到這里就ok了；如果想要再看我啰嗦一些東西，可以耐著性子繼續看下去。

剛剛原生 JS 為什么不用 height？

如果有同學仔細比對兩段代碼，一定會有上面那個疑惑。事實上，DOM并沒有提供height屬性。

但是，scrollHight 和 offsetHeight 又有什么區別呢？請看下圖：

上圖中，紅框的高度大致體現了 scrollHeight 的高度。假如對外框設置 overflow: hidden，紅框會收縮至黑框內部，但是實際的 scrollHeight 還是原紅框的高度。

而 offsetHeight 和 clientHeight 差不多，都是反映元素表現的高度。這三個更詳細的區別請看這個文檔：JavaScrip 教程 / DOM / Element 節點

PS：經過本人實測，jQuery的 .height() 方法反映的是 scrollHeight，本場景是足以應付的，但是一些特殊情況還是需要用到DOM提供的。

來個驚喜

到這里該講的差不多都說完了，但是因為我的項目中多處用到多行文本的省略，每次都copy實在非程序員所為。所以，我將這個方法插入jQuery，作為擴展的方法。將代碼貼出來，造福和我一樣萌萌的新人~

/*** jQuery自定義函數*/ (function ($) {/*** 檢查文字長度是否溢出，如果是則將溢出部分省略** 注意：* 文字本身容器需設置line-height* 父物體容器需設置height和overflow-wrap: break-word（目前兼容性比較好的溢出換行樣式）*/$.fn.checkOverflow = function (parentClass) {$(this).each(function (id, el) {var $this = $(el);var $parent = $this.closest(parentClass);if ($this.height() > $parent.height()) {var parentHeight = $parent[0].offsetHeight;var thisText = $this.text();for (var i = 0; i <= thisText.length; i++) {$this.text(thisText.slice(0, i));if (parentHeight < $this[0].scrollHeight) {var str_all_cn = true;// 判斷省略號取代的三個字符是否全為中文字符thisText.slice(i-2).split('').forEach(function (c,id) {if (thisText.slice(i-2).charCodeAt(id) <= 255) {str_all_cn = false;}});if (str_all_cn) {$this.text(thisText.slice(0, i - 2) + "...");} else {$this.text(thisText.slice(0, i - 3) + "...");}break;}}}})}; })(jQuery); 復制代碼

總結

雖然這個只是解決了實際項目開發中一個小得不能再小的問題，但是從頭到尾寫下來，我個人還是從中收獲了很多。所以說，寫專欄一時爽，一直寫一直爽~

最后，推薦一些在這個過程中發現的很有用的資料：

（阮一峰）文檔：JavaScript 教程 / DOM

MDN 文檔：CSS Text

轉載于:https://juejin.im/post/5ce6aa7b6fb9a07eb15d2f63

總結

以上是生活随笔為你收集整理的用JS解决多行溢出文本的省略问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。