寫前端UI的朋友們也許都遇到過這樣的問題：我們需要實現這樣一個需求，在一個父級元素中隱藏一個可能過長的文本：
這個文本可能是單行的：
也可能是多行的：
下面我就給大家展示如何簡單或優雅地實現這種需求
單行文本溢出的省略
先上代碼
<div style = 'width:400px; height:40px; border:1px solid red;'> <p style='overflow: hidden; text-overflow: ellipsis; white-space: nowrap;'> 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本 </p> </div>
demo:
關於overflow: hidden
這里我們需要注意到一點：這里的overflow並不是設置為父級元素div的屬性，而是p標簽的屬性，需要和overflow的普通用法區分開來
1overflow：hidden的普通用法：用在塊級元素（例如div）的外層隱藏內部溢出元素
2overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;實現p元素隱藏自身的溢出並設置（...）的效果
關於text-overflow: ellipsis;
這一屬性依賴於overflow: hidden存在，只有設置了overflow:hidden它才是能夠生效的，你可以把它看作overflow對於文本溢出隱藏的一種‘特殊樣式’
關於white-space: nowrap
它的作用是讓文本不換行，這是overflow:hidden和text-overflow：ellipsis生效的基礎！沒有它overflow:hidden和text-overflow：ellipsis無法生效！（在單行文本溢出省略這一案例中）
從單行文本溢出省略到多行文本溢出省略
許多同學可能會這樣想：怎么實現多行文本省略呢？不是只要把white-space:nowrap去掉就可以了嗎？( _(:3 」∠)_ 要是這么簡單就好了...)
實踐出真知，讓我們來試一下，去掉CSS樣式中的white-space:nowrap，demo：
這次，沒能隱藏成功，那如果我們overflow:hidden是設在父級元素div中呢？得到demo:
隱藏成功了，可你仍然看不到你想看到的那三個點
妥妥地失敗了，嗯，沒錯,所以對於多行文本溢出的省略我們需要另辟蹊徑了
多行文本溢出的省略（...）方案一 ---簡單方便的解決方案
我們可以借助webkit的CSS擴展屬性實現這一點：
<div style = 'width:400px; height:70px; border:1px solid red;'> <p style='display: -webkit-box;//對象作為彈性伸縮盒子模型顯示 -webkit-box-orient: vertical;//設置或檢索伸縮盒對象的子元素的排列方式 -webkit-line-clamp: 2;//溢出省略的界限 overflow:hidden;//設置隱藏溢出元素'> 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本 </p> </div>
demo:
【注意】
1四行CSS缺一不可！
2因為這是webkit的CSS屬性擴展，所以兼容瀏覽器范圍是PC端的webkit內核的瀏覽器：chrome/safari/QQ瀏覽器/360/獵豹等以及絕大多數的移動端瀏覽器
多行文本溢出的省略（...）方案二 ---簡單粗暴的解決方案
方案一固然最為簡單，但其還存在着跨瀏覽器兼容的問題，於是人民群眾們提出了一種簡單粗暴的方式去實現通用的解決方案：給div固定高和寬，同時采用相對定位，與此同時對在div內放一個<p>...</p>對其使用絕對定位，定在右下角，同時設其背景顏色為白色就可以了：
<div style = 'position:relative; width:400px; height:45px; border:1px solid red; overflow:hidden; '> 這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本 <p style = 'position:absolute;right:0;bottom:6px;margin:0;background:white'>...</p> </div>
demo:
但方案二也有一些問題
1在文本沒有溢出父級元素時也同樣顯示省略號：
2末尾處文本可能有被“裁剪”的副效果：
多行文本溢出的省略（...）方案三 --簡潔優雅的解決方案
那么有沒有更加優雅的解決方案，在沒有溢出的時候不顯示省略號（...），在溢出的時候隱藏並顯示省略號呢？答案是有的！先看看我們最終實現的demo:
在文本沒有溢出父級元素時：
文本溢出父級元素時：
下面是HTML和JS代碼：
<div id='view' style='border:1px solid red;width:200px;height:70px;overflow:auto'></div>
s = '這是一個文本這是一個文本這是一個文本這是一個文本這是一個文本這是一個文本' el = document.getElementById('view'); n = el.offsetHeight; for(i=0; i<s.length; i++) { el.innerHTML = s.substr(0, i); if(n < el.scrollHeight) { el.style.overflow = 'hidden'; el.innerHTML = s.substr(0, i-3) + '...'; break; } }
首先我們需要弄清楚offsetHeight和scrollHeight所表示的高度：
1溢出顯示滾動條時：
2沒有溢出時：
el = document.getElementById('view'); n = el.offsetHeight;表示的是取到當前包裹文本的父級元素的高度， el.innerHTML = s.substr(0, i);表示在for循環中取出長度遞增的文段， '這'--> '這是' --> '這是一'，當n < el.scrollHeight也就是 當前文本高度<滾動條內的內容的高度，代表着剛好達到溢出的界限，此時執行if內的語句el.style.overflow = 'hidden';el.innerHTML = s.substr(0, i-3) + '...'; break;將父級元素view的overflow設置為hidden，並且將末尾的三個文字用...取代，同時跳出for循環
perfect!這樣我們就實現了優雅的解決方案
【完】--喜歡這篇文章的話不妨關注一下我喲