關於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}

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

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

總結

#

以上是關於css中text-overflow屬性與文字截斷的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！