css中text-overflow屬性與文本截?cái)嘣斀?/h1>
發(fā)布時(shí)間：2017-06-04 16:49:07 作者：葵中劍 
我要評(píng)論
這篇文章主要給大家介紹了關(guān)于css中text-overflow屬性與文本截?cái)嗟南嚓P(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，希望本文的內(nèi)容對(duì)各位前端開發(fā)者們能帶一定的幫助，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
前言
本文主要給大家介紹的是css中text-overflow屬性與文本截?cái)嗟南嚓P(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)看看詳細(xì)的介紹：
text-overflow與文本截?cái)?/strong>
CSSer對(duì)text-overflow肯定是非常熟悉的，并且，對(duì)于單行文本的截?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，我們才拋開對(duì)于FF的伎倆而專注使用這段代碼。當(dāng)然多行截?cái)噙€是沒戲，在一些跨瀏覽器兼容要求較高的場(chǎng)合，前端一度需要后端幫忙截?cái)鄡?nèi)容。
雖然也不是沒有其他方式實(shí)現(xiàn)多行的文本截?cái)?，但?duì)于當(dāng)時(shí)的瀏覽器形式而言不可能全部照顧到位。比如現(xiàn)在可以用偽元素:after定位在多行的結(jié)尾，并施加一個(gè)漸變過渡來(lái)模擬截?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)嗫雌饋?lái)不那么生硬，不過我一次都沒在實(shí)際場(chǎng)合用過:),因?yàn)檫@種方式有很多弊端，而且我也向來(lái)不喜歡用這種看起來(lái)就很丑陋的方式。除非被逼急了，不然我總是對(duì)一本正經(jīng)地對(duì)別人說(shuō)：“臣妾做不到”~
如果單單是webkit，通常的做法就是-webkit-line-clamp，對(duì)于目前webkit所主宰的手機(jī)端還算是比較好的方式，效果也正是我們所期望的那樣：
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
好多年了(>5)，這段代碼還是工作良好，不過現(xiàn)在回過頭看看，-webkit-box是舊的flex的語(yǔ)法，雖然現(xiàn)在和新flex語(yǔ)法并存，但指不定哪天就沒了呢。但即便如此，也并沒有更好的辦法，沒有替代-webkit-line-clamp的屬性，新舊語(yǔ)法也無(wú)法混用，我們只好繼續(xù)乖乖使用“經(jīng)典”代碼。
-webkit-line-clamp存在另一個(gè)小問題，就是對(duì)中文的支持有瑕疵。相比英文下的完美效果，使用中文時(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)來(lái)表示，實(shí)際上除了上面提到的偽元素模擬的方式外，我們也無(wú)法更改這種表現(xiàn)形式。不過，回過頭來(lái)再看一下text-overflow這個(gè)屬性，新版的標(biāo)準(zhǔn)會(huì)帶來(lái)的更多的可能性。
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>文本來(lái)替換截?cái)鄷r(shí)萬(wàn)年不變的那三個(gè)點(diǎn)，可以指定過渡和控制其距離，甚至可以提供兩個(gè)值來(lái)同時(shí)控制行首與行尾...雖然這似乎并沒有什么卵用，但Firefox居然早在9.0就首先支持了其中的<string>值和雙值語(yǔ)法！我擦，莫非是當(dāng)年Firefox在text-overflow遭人詬病后，痛改前非一步就邁向最新的坑里去了么...
然而，text-overflow還是那個(gè)text-overflow，依舊是單行，依舊是配合老搭檔white-space: nowrap;,還是那個(gè)熟悉的味道。縱然可能多了些時(shí)髦的功能，卻依舊無(wú)法掩蓋我們?cè)诙嘈薪財(cái)嗌系氖侄沃畢T乏。
總結(jié)
好了，先說(shuō)到這里了。以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
我要評(píng)論前言
本文主要給大家介紹的是css中text-overflow屬性與文本截?cái)嗟南嚓P(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)看看詳細(xì)的介紹：
text-overflow與文本截?cái)?/strong>
CSSer對(duì)text-overflow肯定是非常熟悉的，并且，對(duì)于單行文本的截?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，我們才拋開對(duì)于FF的伎倆而專注使用這段代碼。當(dāng)然多行截?cái)噙€是沒戲，在一些跨瀏覽器兼容要求較高的場(chǎng)合，前端一度需要后端幫忙截?cái)鄡?nèi)容。
雖然也不是沒有其他方式實(shí)現(xiàn)多行的文本截?cái)?，但?duì)于當(dāng)時(shí)的瀏覽器形式而言不可能全部照顧到位。比如現(xiàn)在可以用偽元素:after定位在多行的結(jié)尾，并施加一個(gè)漸變過渡來(lái)模擬截?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)嗫雌饋?lái)不那么生硬，不過我一次都沒在實(shí)際場(chǎng)合用過:),因?yàn)檫@種方式有很多弊端，而且我也向來(lái)不喜歡用這種看起來(lái)就很丑陋的方式。除非被逼急了，不然我總是對(duì)一本正經(jīng)地對(duì)別人說(shuō)：“臣妾做不到”~
如果單單是webkit，通常的做法就是-webkit-line-clamp，對(duì)于目前webkit所主宰的手機(jī)端還算是比較好的方式，效果也正是我們所期望的那樣：
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
好多年了(>5)，這段代碼還是工作良好，不過現(xiàn)在回過頭看看，-webkit-box是舊的flex的語(yǔ)法，雖然現(xiàn)在和新flex語(yǔ)法并存，但指不定哪天就沒了呢。但即便如此，也并沒有更好的辦法，沒有替代-webkit-line-clamp的屬性，新舊語(yǔ)法也無(wú)法混用，我們只好繼續(xù)乖乖使用“經(jīng)典”代碼。
-webkit-line-clamp存在另一個(gè)小問題，就是對(duì)中文的支持有瑕疵。相比英文下的完美效果，使用中文時(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)來(lái)表示，實(shí)際上除了上面提到的偽元素模擬的方式外，我們也無(wú)法更改這種表現(xiàn)形式。不過，回過頭來(lái)再看一下text-overflow這個(gè)屬性，新版的標(biāo)準(zhǔn)會(huì)帶來(lái)的更多的可能性。
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>文本來(lái)替換截?cái)鄷r(shí)萬(wàn)年不變的那三個(gè)點(diǎn)，可以指定過渡和控制其距離，甚至可以提供兩個(gè)值來(lái)同時(shí)控制行首與行尾...雖然這似乎并沒有什么卵用，但Firefox居然早在9.0就首先支持了其中的<string>值和雙值語(yǔ)法！我擦，莫非是當(dāng)年Firefox在text-overflow遭人詬病后，痛改前非一步就邁向最新的坑里去了么...
然而，text-overflow還是那個(gè)text-overflow，依舊是單行，依舊是配合老搭檔white-space: nowrap;,還是那個(gè)熟悉的味道。縱然可能多了些時(shí)髦的功能，卻依舊無(wú)法掩蓋我們?cè)诙嘈薪財(cái)嗌系氖侄沃畢T乏。
總結(jié)
好了，先說(shuō)到這里了。以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
用css截取字符實(shí)現(xiàn)文字自動(dòng)截?cái)嚯[藏溢出文本
