本文翻譯自css ellipsis: how to manage multi-line ellipsis in pure css,文中某些部分有些許改動，並新增譯者的一些感想，請各位讀者諒解。
合理的截斷多行文字是件不容易的事情，我們通常採用幾種方法解決：
英文原文寫作時間是2012.9.18號，比較有意義的一天。不過作者忽略了webkit提供的乙個擴充套件屬性-webkit-line-clamp，它並不是css規範中的屬性。利用該屬性實現多行文字的省略號顯示需要配合其他三個屬性：display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis;。其中，-webkit-line-clamp設定塊元素包含的文字行數;display: -webkit-box設定塊元素的布局為伸縮布局;-webkit-box-orient設定伸縮項的布局方向;text-overflow: ellipsis;則表示超出盒子的部分使用省略號表示。
不過本文將要介紹的方法是採用css規範中的屬性，並結合特殊的實現技巧完成的。這意味著在實現css2.1規範的瀏覽器中都是可以相容的，不將僅僅是純粹的移動端領域，在傳統的pc瀏覽器(你們懂得我指的是哪些瀏覽器)中仍是可行的。好吧，讓我們一起見識下。
css實現多行文字溢位的省略號顯示
我們把實現的細節劃分為7個步驟，在這個實現過程中最簡單的就是截斷文字，而最難的部分則是讓乙個元素處在其父包含塊溢位時的右下方，並且當父元素未溢位時該元素消失不可見。為了去難避易，我們先從比較簡單的地方開始–當父包含框比較小時，將子元素布局到父包含框的右下角。
1st 引子
其實這個實現完全利用了元素浮動的基本規則。在這裡不詳細講解css2.1規範中的幾種情形，不明白的讀者自行查閱。這段**實現很簡單，就是三個子元素和包含塊的高度及浮動設定：
"wrap">"prop">1.prop
float:left
"main">2.main
float:right
fairly short text
"end">3.end
float:right
.wrap
.prop
.main
.end
2nd 模擬場景
我們通過建立乙個子元素來替代將要顯示的省略號，當文字溢位的情形下該元素顯示在正確的位置上。在接下來的實現中，我們建立了乙個realend元素，並利用上一節end元素浮動後的位置來實現realend元素的定位。
"wrap">"prop">
1.prop
float:right
"main">
2.main
float:left
fairly short text
"end">
"realend">
4.realend
position:absolute
3.end
float:right
.end
.realend
這一步中，我們主要關心的是realend元素的定位，基於浮動後的end元素設定偏移量，當end元素浮動到第一節第二章圖的位置時(即在prop元素的下方)，此時realend元素正好處在end元素的上方50px，右側300px-100px=200px處，而該位置正是父包含框wrap元素的右下角，此時正是我們期待的結果：
若父元素並沒有溢位，那麼realend元素會出現在其右側
這種情況解決很簡單，請看下文之第七節，此處僅作例項說明。
3rd 優化定位模型
在第二節中，我們針對end元素設定了相對定位，對realend元素設定絕對定位。但是我們可以採用更為簡單的**來實現，即只使用相對定位。熟悉定位模型的同學應該知道，相對定位的元素仍然佔據文字流，同時仍可針對元素設定偏移。這樣，就可以去掉end元素，僅針對realend元素設定相對定位。
"wrap">"prop">1.prop
float:right
"main">2.main
float:left
fairly short text
"realend">
3.realend
position:relative
.realend
其他的屬性並不改變，效果一樣。
4th 削窄prop元素
目前，最左側的prop元素的作用在於讓realend元素在文字溢位時處在其正下方，在前幾節的示例**中為了直觀的演示，設定prop元素的寬度為100px，那麼現在為了更好的模擬實際的效果，我們縮小逐漸縮小prop元素的寬度。
"wrap">"prop">1.prop
float:right
"main">2.main
float:left
fairly short text
"realend">
3.realend
position:relative
.prop
.main
.realend
針對prop元素，縮小寬度為5px，其餘屬性不變;
針對main元素，設定margin-left:5px，讓main元素左移5px，這樣main元素在寬度上就完全佔滿了父元素;
對於realend元素，top、left和width的值不變。而設定margin-left: -100px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。
boxwidth = childmarginleft + childborderleftwidth + childpaddingleft + childwidth + childpaddingleft + childborderrightwidth + childmarginrightwidth;由於css規範規定padding的值不可以為負數，因此只有設定margind-left為負值，且等於其寬度。這樣做的最終目的就是保證realend元素處在prop元素的下方，保證在文字溢位的情況下定位準確性:
5th 繼續優化：流式布局+偽元素
目前，realend元素的相關屬性仍採用px度量，為了更好的擴充套件性，可以改用%替代。
同時，prop元素和realend元素可以採用偽元素來實現，減少額外標籤的使用。
"ellipsis">2.main
float:left
fairly short text
/*相當於之前的prop元素*/
.ellipsis:before
/*相當於之前的main元素*/
.ellipsis > *:first-child
/*相當於之前的realend元素*/
.ellipsis:after
效果圖和上節一樣。
6th 隱藏
之前的實現中在文字未溢位的情況下，realend元素會出現在父元素的右側，正如。
解決此問題很簡單，急需要設定：
.ellipsis即可解決問題。
7th 大功告成
現在我們離完結就差一步了，即去掉各元素的背景色，並且用「…」替換文字。最後為了優化體驗，採用漸變來隱藏「…」覆蓋的文字，並設定了一些相容性的屬性。
到了此處，相信現在關心的只是css的**了：
.ellipsis.ellipsis:before
.ellipsis > *:first-child
.ellipsis:after
總結之相容性
從上文的實現細節來看，我們利用的技巧完全是css規範中的浮動+定位+盒模型寬度計算，唯一存在相容性問題的在於無關痛癢的漸變實現，因此可以在大多數瀏覽器下進行嘗試。
css 之單行文字顯示省略和多行文字省略
一 單行文字顯示省略號.overflow hidden white space nowrap text overflow ellipsis doctype html html lang zh head meta charset utf 8 style type text css 一般要指定寬度，然後...
CSS中多行文字溢位省略
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況，之前處理多行文字的話需要js來支援。display webkit box 將物件作為彈性伸...
CSS實現多行文字溢位顯示省略號
單行文字溢位顯示省略號，可以直接使用 text overflow ellipsis white space nowrap 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 多行文字溢位顯示省略號 方案一 使用webkit屬性 webkit line clamp 注意這是乙個不規範的屬性 哈哈哈哈哈哈...