如何用CSS實現(xiàn)多行文本的省略號顯示
本文翻譯自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些許改動，并添加譯者的一些感想，請各位讀者諒解。
合理的截斷多行文本是件不容易的事情，我們通常采用幾種方法解決：
- overflow: hidden直接隱藏多余的文本
- text-overflow: ellipsis只適用于單行文本的處理
- 各種比較脆弱的javascript實現(xiàn)。之所以說這種實現(xiàn)比較脆弱是由于需要文本長度的變化時刻得到回流(relayout)后的布局信息，如寬度
英文原文寫作時間是2012.9.18號，比較有意義的一天。不過作者忽略了WebKit提供的一個擴展屬性-webkit-line-clamp，它并不是CSS規(guī)范中的屬性。利用該屬性實現(xiàn)多行文本的省略號顯示需要配合其他三個屬性：display: -webkit-box、-webkit-box-orient、text-overflow: ellipsis;。其中，-webkit-line-clamp設(shè)置塊元素包含的文本行數(shù);display: -webkit-box設(shè)置塊元素的布局為伸縮布局;-webkit-box-orient設(shè)置伸縮項的布局方向;text-overflow: ellipsis;則表示超出盒子的部分使用省略號表示。
不過本文將要介紹的方法是采用CSS規(guī)范中的屬性，并結(jié)合特殊的實現(xiàn)技巧完成的。這意味著在實現(xiàn)CSS2.1規(guī)范的瀏覽器中都是可以兼容的，不將僅僅是純粹的移動端領(lǐng)域，在傳統(tǒng)的PC瀏覽器(你們懂得我指的是哪些瀏覽器)中仍是可行的。好吧，讓我們一起見識下。
CSS實現(xiàn)多行文本溢出的省略號顯示
我們把實現(xiàn)的細(xì)節(jié)劃分為7個步驟，在這個實現(xiàn)過程中最簡單的就是截斷文本，而最難的部分則是讓一個元素處在其父包含塊溢出時的右下方，并且當(dāng)父元素未溢出時該元素消失不可見。為了去難避易，我們先從比較簡單的地方開始–當(dāng)父包含框比較小時，將子元素布局到父包含框的右下角。
1st 引子
其實這個實現(xiàn)完全利用了元素浮動的基本規(guī)則。在這里不詳細(xì)講解CSS2.1規(guī)范中的幾種情形，不明白的讀者自行查閱。這段代碼實現(xiàn)很簡單，就是三個子元素和包含塊的高度及浮動設(shè)置：
- <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 模擬場景
我們通過創(chuàng)建一個子元素來替代將要顯示的省略號，當(dāng)文本溢出的情形下該元素顯示在正確的位置上。在接下來的實現(xiàn)中，我們創(chuàng)建了一個realend元素，并利用上一節(jié)end元素浮動后的位置來實現(xiàn)realend元素的定位。
- <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; }
這一步中，我們主要關(guān)心的是realend元素的定位，基于浮動后的end元素設(shè)置偏移量，當(dāng)end元素浮動到***節(jié)第二章圖的位置時(即在prop元素的下方)，此時realend元素正好處在end元素的上方50px，右側(cè)300px-100px=200px處，而該位置正是父包含框wrap元素的右下角，此時正是我們期待的結(jié)果：
若父元素并沒有溢出，那么realend元素會出現(xiàn)在其右側(cè)
這種情況解決很簡單，請看下文之第七節(jié)，此處僅作實例說明。
3rd 優(yōu)化定位模型
在第二節(jié)中，我們針對end元素設(shè)置了相對定位，對realend元素設(shè)置絕對定位。但是我們可以采用更為簡單的代碼來實現(xiàn)，即只使用相對定位。熟悉定位模型的同學(xué)應(yīng)該知道，相對定位的元素仍然占據(jù)文本流，同時仍可針對元素設(shè)置偏移。這樣，就可以去掉end元素，僅針對realend元素設(shè)置相對定位。
- <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元素
目前，最左側(cè)的prop元素的作用在于讓realend元素在文本溢出時處在其正下方，在前幾節(jié)的示例代碼中為了直觀的演示，設(shè)置prop元素的寬度為100px，那么現(xiàn)在為了更好的模擬實際的效果，我們縮小逐漸縮小prop元素的寬度。
- <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元素，設(shè)置margin-left:5px，讓main元素左移5px，這樣main元素在寬度上就完全占滿了父元素;
對于realend元素，top、left和width的值不變。而設(shè)置margin-left: -100px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。
- BoxWidth = ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth + ChildPaddingLeft + ChildBorderRightWidth + ChildMarginRightWidth;
具體可參考我之前的文章負(fù)margin的原理以及應(yīng)用一文。
由于CSS規(guī)范規(guī)定padding的值不可以為負(fù)數(shù)，因此只有設(shè)置margind-left為負(fù)值，且等于其寬度。這樣做的最終目的就是保證realend元素處在prop元素的下方，保證在文本溢出的情況下定位準(zhǔn)確性:
5th 繼續(xù)優(yōu)化：流式布局+偽元素
目前，realend元素的相關(guān)屬性仍采用px度量，為了更好的擴展性，可以改用%替代。
同時，prop元素和realend元素可以采用偽元素來實現(xiàn)，減少額外標(biāo)簽的使用。
- <div class="ellipsis">
- <div>2.main<br>float:left<br>Fairly short text
- </div>
- </div>
- /*相當(dāng)于之前的prop元素*/
- .ellipsis:before {
- content: "";
- float: left;
- width: 5px; height: 200px;
- background: #F0F; }
- /*相當(dāng)于之前的main元素*/
- .ellipsis > *:first-child {
- float: right;
- width: 100%;
- margin-left: -5px;
- background: #AFF; }
- /*相當(dāng)于之前的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; }
效果圖和上節(jié)一樣。
6th 隱藏
之前的實現(xiàn)中在文本未溢出的情況下，realend元素會出現(xiàn)在父元素的右側(cè)，正如。
解決此問題很簡單，急需要設(shè)置：
- .ellipsis{
- overflow:hidden;
- }
即可解決問題。
7th 大功告成
現(xiàn)在我們離完結(jié)就差一步了，即去掉各元素的背景色，并且用“…”替換文本。***為了優(yōu)化體驗，采用漸變來隱藏“…”覆蓋的文本，并設(shè)置了一些兼容性的屬性。
到了此處，相信現(xiàn)在關(guān)心的只是CSS的代碼了：
- .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);
- }
總結(jié)之兼容性
從上文的實現(xiàn)細(xì)節(jié)來看，我們利用的技巧完全是CSS規(guī)范中的浮動+定位+盒模型寬度計算，唯一存在兼容性問題的在于無關(guān)痛癢的漸變實現(xiàn)，因此可以在大多數(shù)瀏覽器下進行嘗試。
