本文翻譯自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些許改動，並新增譯者的一些感想，請各位讀者諒解。
合理的截斷多行文字是件不容易的事情，我們通常採用幾種方法解決：
overflow: hidden直接隱藏多餘的文字text-overflow: ellipsis只適用於單行文字的處理- 各種比較脆弱的javascript實現。之所以說這種實現比較脆弱是由於需要文字長度的變化時刻得到迴流（relayout）後的佈局資訊，如寬度
英文原文寫作時間是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規範中的幾種情形，不明白的讀者自行查閱。這段程式碼實現很簡單，就是三個子元素和包含塊的高度及浮動設定：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="wrap"> <div class="prop">1.prop<br>float:left</div> <div class="main">2.main<br>float:right<br>Fairly short text</div> <div class="end">3.end<br>float:right</div> </div> .wrap { width: 400px; height: 200px; margin: 20px 20px 50px; border: 5px solid #AAA; line-height: 25px; } .prop { float: left; width: 100px; height: 200px; background: #FAF; } .main { float: right; width: 300px; background: #AFF; } .end { float: right; width: 100px; background: #FFA; } |
2nd 模擬場景
我們通過建立一個子元素來替代將要顯示的省略號，當文字溢位的情形下該元素顯示在正確的位置上。在接下來的實現中，我們建立了一個realend元素，並利用上一節end元素浮動後的位置來實現realend元素的定位。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="wrap"> <div class="prop"> 1.prop<br> float:right</div> <div class="main"> 2.main<br> float:left<br> Fairly short text</div> <div class="end"> <div class="realend"> 4.realend<br> position:absolute</div> 3.end<br>float:right </div> </div> .end { float: right; position: relative; width: 100px; background: #FFA; } .realend { position: absolute; width: 100%; top: -50px; left: 300px; background: #FAA; font-size: 13px; } |
這一步中，我們主要關心的是realend元素的定位，基於浮動後的end元素設定偏移量，當end元素浮動到第一節第二章圖的位置時（即在prop元素的下方），此時realend元素正好處在end元素的上方50px，右側300px-100px=200px處，而該位置正是父包含框wrap元素的右下角，此時正是我們期待的結果：
若父元素並沒有溢位，那麼realend元素會出現在其右側
這種情況解決很簡單，請看下文之第七節，此處僅作例項說明。
3rd 優化定位模型
在第二節中，我們針對end元素設定了相對定位，對realend元素設定絕對定位。但是我們可以採用更為簡單的程式碼來實現，即只使用相對定位。熟悉定位模型的同學應該知道，相對定位的元素仍然佔據文字流，同時仍可針對元素設定偏移。這樣，就可以去掉end元素，僅針對realend元素設定相對定位。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="wrap"> <div class="prop">1.prop<br>float:right</div> <div class="main">2.main<br>float:left<br>Fairly short text</div> <div class="realend"> 3.realend<br>position:relative</div> </div> .realend { float: right; position: relative; width: 100px; top: -50px; left: 300px; background: #FAA; font-size: 14px; } |
其他的屬性並不改變，效果一樣。
4th 削窄prop元素
目前，最左側的prop元素的作用在於讓realend元素在文字溢位時處在其正下方，在前幾節的示例程式碼中為了直觀的演示，設定prop元素的寬度為100px，那麼現在為了更好的模擬實際的效果，我們縮小逐漸縮小prop元素的寬度。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="wrap"> <div class="prop">1.prop<br>float:right</div> <div class="main">2.main<br>float:left<br>Fairly short text</div> <div class="realend"> 3.realend<br>position:relative</div> </div> .prop { float: left; width: 5px; height: 200px; background: #F0F; } .main { float: right; width: 300px; margin-left: -5px; background: #AFF; } .realend { float: right; position: relative; top: -50px; left: 300px; width: 100px; margin-left: -100px; padding-right: 5px; background: #FAA; font-size: 14px; } |
針對prop元素，縮小寬度為5px，其餘屬性不變；
針對main元素，設定margin-left:5px，讓main元素左移5px，這樣main元素在寬度上就完全佔滿了父元素；
對於realend元素，top、left和width的值不變。而設定margin-left: -100px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。
|
1 |
BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth; |
具體可參考我之前的文章負margin的原理以及應用一文。
由於CSS規範規定padding的值不可以為負數，因此只有設定margind-left為負值，且等於其寬度。這樣做的最終目的就是保證realend元素處在prop元素的下方，保證在文字溢位的情況下定位準確性:
5th 繼續優化：流式佈局+偽元素
目前，realend元素的相關屬性仍採用px度量，為了更好的擴充套件性，可以改用%替代。
同時，prop元素和realend元素可以採用偽元素來實現，減少額外標籤的使用。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="ellipsis"> <div>2.main<br>float:left<br>Fairly short text </div> </div> /*相當於之前的prop元素*/ .ellipsis:before { content: ""; float: left; width: 5px; height: 200px; background: #F0F; } /*相當於之前的main元素*/ .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; background: #AFF; } /*相當於之前的realend元素*/ .ellipsis:after { content: "realend"; float: right; position: relative; top: -25px; left: 100%; width: 100px; margin-left: -100px; padding-right: 5px; background: #FAA; font-size: 14px; } |
效果圖和上節一樣。
6th 隱藏
之前的實現中在文字未溢位的情況下，realend元素會出現在父元素的右側，正如。解決此問題很簡單，急需要設定：
|
1 2 3 |
.ellipsis{ overflow:hidden; } |
即可解決問題。
7th 大功告成
現在我們離完結就差一步了，即去掉各元素的背景色，並且用“…”替換文字。最後為了優化體驗，採用漸變來隱藏“…”覆蓋的文字，並設定了一些相容性的屬性。
到了此處，相信現在關心的只是CSS的程式碼了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.ellipsis { overflow: hidden; height: 200px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content:""; float: left; width: 5px; height: 200px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } |
總結之相容性
從上文的實現細節來看，我們利用的技巧完全是CSS規範中的浮動+定位+盒模型寬度計算，唯一存在相容性問題的在於無關痛癢的漸變實現，因此可以在大多數瀏覽器下進行嘗試。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
