前言

本文主要給大家介紹的是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;,還是那個熟悉的味道。縱然可能多了些時髦的功能，卻依舊無法掩蓋我們在多行截斷上的手段之匱乏。

總結

好了，先說到這里了。以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。