翻譯 如何使用CSS實現多行文字的省略號顯示

2021-09-17 02:27:33 字數 3854 閱讀 8929

本文翻譯自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瀏覽器（你們懂得我指的是哪些瀏覽器）中仍是可行的。好吧，讓我們一起見識下。

我們把實現的細節劃分為7個步驟，在這個實現過程中最簡單的就是截斷文字，而最難的部分則是讓乙個元素處在其父包含塊溢位時的右下方，並且當父元素未溢位時該元素消失不可見。為了去難避易，我們先從比較簡單的地方開始--當父包含框比較小時，將子元素布局到父包含框的右下角。

其實這個實現完全利用了元素浮動的基本規則。在這裡不詳細講解css2.1規範中的幾種情形，不明白的讀者自行查閱。這段**實現很簡單，就是三個子元素和包含塊的高度及浮動設定：

1.prop


float:left


2.main


float:right


fairly short text


3.end


float:right


.wrap 


.prop 


.main 


.end
我們通過建立乙個子元素來替代將要顯示的省略號，當文字溢位的情形下該元素顯示在正確的位置上。在接下來的實現中，我們建立了乙個realend元素，並利用上一節end元素浮動後的位置來實現realend元素的定位。

1.prop


float:right


2.main


float:left


fairly short text


4.realend


position:absolute


3.end


float:right


.end 


.realend
這一步中，我們主要關心的是realend元素的定位，基於浮動後的end元素設定偏移量，當end元素浮動到第一節第二章圖的位置時（即在prop元素的下方），此時realend元素正好處在end元素的上方50px，右側300px-100px=200px處，而該位置正是父包含框wrap元素的右下角，此時正是我們期待的結果：

若父元素並沒有溢位，那麼realend元素會出現在其右側

這種情況解決很簡單，請看下文之第七節，此處僅作例項說明。

在第二節中，我們針對end元素設定了相對定位，對realend元素設定絕對定位。但是我們可以採用更為簡單的**來實現，即只使用相對定位。熟悉定位模型的同學應該知道，相對定位的元素仍然佔據文字流，同時仍可針對元素設定偏移。這樣，就可以去掉end元素，僅針對realend元素設定相對定位。

1.prop


float:right


2.main


float:left


fairly short text


3.realend


position:relative


.realend
其他的屬性並不改變，效果一樣。

目前，最左側的prop元素的作用在於讓realend元素在文字溢位時處在其正下方，在前幾節的示例**中為了直觀的演示，設定prop元素的寬度為100px，那麼現在為了更好的模擬實際的效果，我們縮小逐漸縮小prop元素的寬度。

1.prop


float:right


2.main


float:left


fairly short text


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元素的下方，保證在文字溢位的情況下定位準確性:

目前，realend元素的相關屬性仍採用px度量，為了更好的擴充套件性，可以改用%替代。

同時，prop元素和realend元素可以採用偽元素來實現，減少額外標籤的使用。

2.main


float:left


fairly short text


/*相當於之前的prop元素*/


.ellipsis:before 


/*相當於之前的main元素*/


.ellipsis > *:first-child 


/*相當於之前的realend元素*/


.ellipsis:after
效果圖和上節一樣。

之前的實現中在文字未溢位的情況下，realend元素會出現在父元素的右側，正如。解決此問題很簡單，急需要設定：

.ellipsis
即可解決問題。

現在我們離結完就差一步了，即去掉各元素的背景色，並且用「...」替換文字。最後為了優化體驗，採用漸變來隱藏「...」覆蓋的文字，並設定了一些相容性的屬性。

到了此處，相信現在關心的只是css的**了：

.ellipsis 


.ellipsis:before 


.ellipsis > *:first-child 


.ellipsis:after
從上文的實現細節來看，我們利用的技巧完全是css規範中的浮動+定位+盒模型寬度計算，唯一存在相容性問題的在於無關痛癢的漸變實現，因此可以在大多數瀏覽器下進行嘗試。

翻譯 如何使用CSS實現多行文字的省略號顯示

本文翻譯自css ellipsis how to manage multi line ellipsis in pure css,文中某些部分有些許改動，並新增譯者的一些感想，請各位讀者諒解。合理的截斷多行文字是件不容易的事情，我們通常採用幾種方法解決 原文寫作時間是2012.9.18號，比較有意義的...

CSS實現多行文字截斷

簡歷大家自然都有，這裡我要說的是如果要找海外的工作，最好在linkedin上維護乙份詳細的英文簡歷，不管你是否打算在linkedin上投簡歷，這都是很有用的。首先，很多公司在投簡歷的時候不要你傳送的pdf簡歷，而是要求你在它自己的 上填寫一堆資訊 簡歷大家自然都有，這裡我要說的是如果要找海外的工作，...

css 實現單行 多行文字顯示

1.單行顯示文字，超出顯示省略號，很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示，限制行數，超出顯示省略號，如下實現 width 200px...