之前一直在部落格園寫作，最近幾天才開的知乎專欄，才疏學淺， 謬誤之處請不吝于評論區指教，謝謝大家。
文章目錄
- 單行文本溢出的省略
- 從單行文本溢出省略到多行文本溢出省略
- 多行文本溢出的省略（...）方案一 ---簡單友善的解決方案
- 多行文本溢出的省略（...）方案二 ---簡單粗暴的解決方案
- 多行文本溢出的省略（...）方案三 --簡潔優雅的解決方案
寫前端UI的朋友們也許都遇到過這樣的問題：我們需要實作這樣一個需求，在一個父級元素中隐藏一個可能過長的文本
這個文本可能是單行的：
也可能是多行的：
下面我就給大家展示如何簡單或優雅地實作這種需求
單行文本溢出的省略
先上代碼
<
demo:
這裡我們需要注意到一點：這裡的overflow并不是設定為父級元素div的屬性，而是p标簽的屬性，需要和overflow的普通用法區分開來
- overflow：hidden的普通用法：用在塊級元素（例如div）的外層隐藏内部溢出元素
- overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;實作p元素隐藏自身的溢出并設定（...）的效果
這一屬性依賴于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:nowrapdemo：
這次，沒能隐藏成功，那如果我們overflow:hidden是設在父級元素div中呢？
得到demo:
隐藏成功了，
可你仍然看不到你想看到的那三個點妥妥地失敗了，嗯，沒錯,是以對于多行文本溢出的省略我們需要另辟蹊徑了
多行文本溢出的省略（...）方案一 ---簡單友善的解決方案
我們可以借助
webkit的CSS擴充屬性實作這一點：
<
demo:
【注意】
- 四行CSS缺一不可！
- 因為這是webkit的CSS屬性擴充，是以相容浏覽器範圍是PC端的webkit核心的浏覽器：chrome/safari/QQ浏覽器/360/獵豹等以及絕大多數的移動端浏覽器
多行文本溢出的省略（...）方案二 ---簡單粗暴的解決方案方案一固然最為簡單，但其還存在着跨浏覽器相容的問題
，于是人民群衆們提出了一種簡單粗暴的方式去實作通用的解決方案：給div固定高和寬，同時采用相對定位，與此同時對在div内放一個<p>...</p>對其使用絕對定位，定在右下角，同時設其背景顔色為白色就可以了：
<
demo:
但方案二也有一些問題
1在文本沒有溢出父級元素時也同樣顯示省略号：
2末尾處文本可能有被“裁剪”的副效果：
多行文本溢出的省略（...）方案三 --簡潔優雅的解決方案
那麼有沒有更加優雅的解決方案，在沒有溢出的時候不顯示省略号（...），在溢出的時候隐藏并顯示省略号呢？答案是有的！先看看我們最終實作的demo:
在文本沒有溢出父級元素時：
文本溢出父級元素時：
下面是HTML和JS代碼：
<
JS代碼
s
首先我們需要弄清楚offsetHeight和scrollHeight所表示的高度：
1溢出顯示滾動條時：
2沒有溢出時：
el
表示的是取到目前包裹文本的父級元素的高度
el
表示在for循環中取出長度遞增的文段，例如：
'這' --> '這是' --> '這是一'
當n < el.scrollHeight也就是 目前文本高度<滾動條内的内容的高度，代表着剛好達到溢出的界限，此時執行if内的語句
el
将父級元素view的overflow設定為hidden，并且将末尾的三個文字用...取代，同時跳出for循環
perfect! 這樣我們就實作了優雅的解決方案