關於css中text-overflow屬性與文本截斷的範例程式碼分享

這篇文章主要給大家介紹了關於css中text-overflow屬性與文本截斷的相關資料，文中給出了詳細的範例程式碼供大家參考學習，希望本文的內容對各位前端開發人員們能帶一定的協助，需要的朋友們下面跟著小編一起來學習學習吧。

前言

本文主要給大家介紹的是css中text-overflow屬性與文本截斷的相關內容，分享出來供大家參考學習，下面來看看詳細的介紹：

text-overflow與文本截斷

CSSer對text-overflow肯定是非常熟悉的，並且，對於單行文本的截斷，包含了text-overflow: ellipsis;的這3行代碼，可能也是我們最為慣用的。

text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;

這小段CSS甚至相容至IE6，畢竟text-overflow: ellipsis;原本就是IE的專屬，於是早期文本截斷的抗爭主要是在Firefox上，直到Firefox7.0，我們才拋開對於FF的伎倆而專註使用這段代碼。當然多行截斷還是沒戲，在一些跨瀏覽器安全色要求較高的場合，前端一度需要後端幫忙截斷內容。

雖然也不是沒有其他方式實現多行的文本截斷，但對於當時的瀏覽器形式而言不可能全部照顧到位。比如現在可以用虛擬元素:after定位在多行的結尾，並施加一個漸層過渡來類比截斷。

.clamp{  height: 3 .6em;  line-height: 1.2em;  overflow: hidden;  position: relative;}.clamp:after{  content: "...";  position: absolute;  right: 0;  bottom: 0;  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);}

漸層的使用讓截斷看起來不那麼生硬，不過我一次都沒在實際場合用過:),因為這種方式有很多弊端，而且我也向來不喜歡用這種看起來就很醜陋的方式。除非被逼急了，不然我總是對一本正經地對別人說：“臣妾做不到”~

如果單單是webkit，通常的做法就是-webkit-line-clamp，對於目前webkit所主宰的手機端還算是比較好的方式，效果也正是我們所期望的那樣：

display: -webkit-box;  -webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;

好多年了(>5)，這段代碼還是工作良好，不過現在回過頭看看，-webkit-box是舊的flex的文法，雖然現在和新flex文法並存，但指不定哪天就沒了呢。但即便如此，也並沒有更好的辦法，沒有替代-webkit-line-clamp的屬性，新舊文法也無法混用，我們只好繼續乖乖使用“經典”代碼。

-webkit-line-clamp存在另一個小問題，就是對中文的支援有瑕疵。相比英文下的完美效果，使用中文時，隨著容器寬度的變化，截斷的那三個點"..."往往會抽風，只顯示2個點甚至是1個點，希望更新版的瀏覽器可以搞定這個小問題。

在文本截斷時，我們總是習慣預設用三個點來表示，實際上除了上面提到的虛擬元素類比的方式外，我們也無法更改這種表現形式。不過，回過頭來再看一下text-overflow這個屬性，新版的標準會帶來的更多的可能性。

CSS Basic User Interface Module Level 3目前是CR的狀態，text-overflow只有兩個值可選：clip 或者 ellipsis，不過到了草案中的Level 4，屬性值變得更多：

[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}

我們可以指定<string>文本來替換截斷時萬年不變的那三個點，可以指定過渡和控制其距離，甚至可以提供兩個值來同時控制行首與行尾...雖然這似乎並沒有什麼卵用，但Firefox居然早在9.0就首先支援了其中的<string>值和雙值文法！我擦，莫非是當年Firefox在text-overflow遭人詬病後，痛改前非一步就邁向最新的坑裡去了麼...

然而，text-overflow還是那個text-overflow，依舊是單行，依舊是配合老搭檔white-space: nowrap;,還是那個熟悉的味道。縱然可能多了些時髦的功能，卻依舊無法掩蓋我們在多行截斷上的手段之匱乏。

總結