前言
本文主要給大家介紹的是css中text-overflow屬性與文本截?cái)嗟南嚓P(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來看看詳細(xì)的介紹：
text-overflow與文本截?cái)?/strong>
CSSer對text-overflow肯定是非常熟悉的，并且，對于單行文本的截?cái)?，包含了text-overflow: ellipsis;的這3行代碼，可能也是我們最為慣用的。
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
這小段CSS甚至兼容至IE6，畢竟text-overflow: ellipsis;原本就是IE的專屬，于是早期文本截?cái)嗟目範(fàn)幹饕窃贔irefox上，直到Firefox7.0，我們才拋開對于FF的伎倆而專注使用這段代碼。當(dāng)然多行截?cái)噙€是沒戲，在一些跨瀏覽器兼容要求較高的場合，前端一度需要后端幫忙截?cái)鄡?nèi)容。
雖然也不是沒有其他方式實(shí)現(xiàn)多行的文本截?cái)?，但對于?dāng)時(shí)的瀏覽器形式而言不可能全部照顧到位。比如現(xiàn)在可以用偽元素:after定位在多行的結(jié)尾，并施加一個(gè)漸變過渡來模擬截?cái)唷?/p>
.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);}漸變的使用讓截?cái)嗫雌饋聿荒敲瓷?，不過我一次都沒在實(shí)際場合用過:),因?yàn)檫@種方式有很多弊端，而且我也向來不喜歡用這種看起來就很丑陋的方式。除非被逼急了，不然我總是對一本正經(jīng)地對別人說：“臣妾做不到”~
如果單單是webkit，通常的做法就是-webkit-line-clamp，對于目前webkit所主宰的手機(jī)端還算是比較好的方式，效果也正是我們所期望的那樣：
display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
好多年了(>5)，這段代碼還是工作良好，不過現(xiàn)在回過頭看看，-webkit-box是舊的flex的語法，雖然現(xiàn)在和新flex語法并存，但指不定哪天就沒了呢。但即便如此，也并沒有更好的辦法，沒有替代-webkit-line-clamp的屬性，新舊語法也無法混用，我們只好繼續(xù)乖乖使用“經(jīng)典”代碼。
-webkit-line-clamp存在另一個(gè)小問題，就是對中文的支持有瑕疵。相比英文下的完美效果，使用中文時(shí)，隨著容器寬度的變化，截?cái)嗟哪侨齻€(gè)點(diǎn)"..."往往會(huì)抽風(fēng)，只顯示2個(gè)點(diǎn)甚至是1個(gè)點(diǎn)，希望更新版的瀏覽器可以搞定這個(gè)小問題。
在文本截?cái)鄷r(shí)，我們總是習(xí)慣默認(rèn)用三個(gè)點(diǎn)來表示，實(shí)際上除了上面提到的偽元素模擬的方式外，我們也無法更改這種表現(xiàn)形式。不過，回過頭來再看一下text-overflow這個(gè)屬性，新版的標(biāo)準(zhǔn)會(huì)帶來的更多的可能性。
CSS Basic User Interface Module Level 3目前是CR的狀態(tài)，text-overflow只有兩個(gè)值可選：clip 或者 ellipsis，不過到了草案中的Level 4，屬性值變得更多：
[ clip | ellipsis | <string> | fade | <fade()> ]{1,2}我們可以指定<string>文本來替換截?cái)鄷r(shí)萬年不變的那三個(gè)點(diǎn)，可以指定過渡和控制其距離，甚至可以提供兩個(gè)值來同時(shí)控制行首與行尾...雖然這似乎并沒有什么卵用，但Firefox居然早在9.0就首先支持了其中的<string>值和雙值語法！我擦，莫非是當(dāng)年Firefox在text-overflow遭人詬病后，痛改前非一步就邁向最新的坑里去了么...
然而，text-overflow還是那個(gè)text-overflow，依舊是單行，依舊是配合老搭檔white-space: nowrap;,還是那個(gè)熟悉的味道。縱然可能多了些時(shí)髦的功能，卻依舊無法掩蓋我們在多行截?cái)嗌系氖侄沃畢T乏。
總結(jié)
好了，先說到這里了。以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
