當字數多到一定程度就顯示省略號點點點。最初只是簡單的點點點，之後花樣越來越多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭...。多行省略就是大段文字後面的花式點點點。
google plus用透明到白色的漸變遮罩，漸變遮罩在文字超出的時候才顯示，但無法擠出文字，且背景只能純色，不理想。
豌豆莢則更簡單粗暴換行顯示，換行顯示則文字未超出時依然顯示 ...***，更不理想！
在qq瀏覽器的頁面用了乙個原創的mod-more ui元件，實現了定製的多行省略，還是純css的，領先同行一大截，贊！贊！贊！只可惜，mod-more元件的高度是固定的。對mod-more進一步進化，完美自適應高度，而且**簡化易用。
...更多
利用右浮動原理——右浮動元素從右到左依次排列，不夠空間則換行。藍色塊、粉色塊、橙色塊依次右浮動，藍色塊高度小於6行文字時，橙色塊在右邊，藍色塊高度大於6行文字時，左下角剛好夠橙色塊排列的空間，於是橙色塊就到左邊了
...更多
進一步將橙色塊偏移到正確位置就大功告成了！細心的同學會發現，將橙色塊加上漸變底就是google plus在用的方案。
-webkit-line-clamp是webkit核心的私有css屬性，用於進行多行省略，在安卓和ios上全支援。但它固定使用省略號，無法直接擴充套件。而且自帶了溢位截斷邏輯，作用於容器高度。仔細考察可發現它使用的省略號是單字元…，可以用文字css屬性如font-size,letter-spacing,color等控制。
設定外容器的font-size、letter-spacing、color，並在子容器裡恢復就可以單獨設定省略號。這裡外容器設定font-size的值等於2倍行高（餘下要撐開的寬度可用letter-spacing補足，也可僅用font-size撐開全部的寬度），color:transparent可以讓line-clamp既擠出文字又不截斷容器高度，外容器高度達到7行而不是預設表現的6行，從而達到需要的溢位截斷效果
... 更多
-webkit-line-clamp實現的文字溢位截斷**為主體，疊加絕對定位同步的按需顯示...更多結構。因為絕對定位，這裡使用百分比簡化**。最外包一層結構限制最大高度。
...更多
text-align:justify一起用會使省略號和文字相疊
超出截斷後會截掉部分行高
省略號出現在單詞中間
text-align:justify時如期所示，沒問題！
截斷時如期所示，也沒問題！
省略號在有單詞時如期顯示，依然沒問題！
簡單增改文字加鏈結只是小case
用折角還是其他表示文字溢位可以增添趣味
溢位時顯示溢位字數增加了實用用途
css 多行省略失效問題
我們在排版布局是，經常會遇到文字省略效果，例如 單行省略 記得要有寬度，預設寬度也可以 g text ove1多行省略 一般情況下沒問題 g text ove2多行省略失效問題 第一種情況主要用於相容，新增這句話 代表刪除老的無效 且新增新的 autoprefixer off webkit box ...
css多行省略號和單行省略號
單行溢位，超出部分顯示.或者擷取。前提必須有寬度 陌生人，我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 div body html 陌生人，我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 d...
css 多行省略的幾種寫法
class box 想起從前呆在南方 許多那裡的氣息 許多那裡的顏色 不知覺心已經輕輕飛起 class desc 我第一次戀愛在那裡 不知她現在怎麼樣 我家門前的湖邊 這時誰還在流連b 時間過得飛快 轉眼這些已成回憶 每天都有新的問題 不知何時又會再憶起span class box2 it s al...