純CSS定制文本省略的方法大全

WeTest導(dǎo)讀
拿到設(shè)計MM的設(shè)計稿,Oh NO,點點點后面又雙叒叕加內(nèi)容了,彈丸之地,勞心費神啊??!可憐我們UI開發(fā)GG每次苦口婆心說,微臣不是不做,是辦不到?。『苁抢⒕?。而現(xiàn)在,自從用了定制多行省略,腰不酸了,手也不疼了,接起需求來,毫不費勁!
一、什么是多行省略?
當(dāng)字?jǐn)?shù)多到一定程度就顯示省略號點點點。最初只是簡單的點點點,之后花樣越來越多,點點點加下箭頭,點點點加更多,點點點加更多加箭頭...。多行省略就是大段文字后面的花式點點點。
同行這么做:
1.Google Plus用透明到白色的漸變遮罩,漸變遮罩在文字超出的時候才顯示,但無法擠出文字,且背景只能純色,不理想。
2.豌豆莢則更簡單粗暴換行顯示,換行顯示則文字未超出時依然顯示 ...xxx,更不理想!
我們這樣做:
在QQ瀏覽器的頁面用了一個原創(chuàng)的mod-more UI組件,實現(xiàn)了定制的多行省略,還是純CSS的,領(lǐng)先同行一大截,贊!贊!贊!只可惜,mod-more組件的高度是固定的。對mod-more進一步進化,完美自適應(yīng)高度,而且代碼簡化易用。
二、怎么做到的?
定制多行省略 = 按需顯示...更多 + 文字溢出截斷,按需顯示...更多是用浮動特性實現(xiàn),文字溢出階段可以用前置浮動和line-clamp實現(xiàn),QQ瀏覽器現(xiàn)有方案就是前置浮動,但缺點是高度固定,使用line-clamp則自適應(yīng)高度,完美!限于篇幅,這里只提line-clamp的實現(xiàn)方案,QQ瀏覽器將在下階段升級至該方案。
原理詳解!
按需顯示...更多
<!doctype html> <html> <body> <style> @-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}} </style> <div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);"> <div style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);"> 騰訊成立于1998年11月,是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念,為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù),始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日,騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。 </div> <div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div> <div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);">...更多</div> </div> </body> </html>
利用右浮動原理——右浮動元素從右到左依次排列,不夠空間則換行。藍色塊、粉色塊、橙色塊依次右浮動,藍色塊高度小于6行文字時,橙色塊在右邊,藍色塊高度大于6行文字時,左下角剛好夠橙色塊排列的空間,于是橙色塊就到左邊了
<!doctype html> <html> <body> <style> @-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}} </style> <div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);"> <div style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);"> 騰訊成立于1998年11月,是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念,為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù),始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日,騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。 </div> <div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div> <div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);left: 100%;-webkit-transform: translate(-100%,-100%);">...更多</div> </div> </body> </html>
進一步將橙色塊偏移到正確位置就大功告成了!細心的同學(xué)會發(fā)現(xiàn),將橙色塊加上漸變底就是Google Plus在用的方案。
文字溢出截斷
<!DOCTYPE html> <html> <body> <style> @-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}} </style> <div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);"> <div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);"> 騰訊成立于1998年11月,是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念,為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù),始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日,騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。</div> </div> </body> </html>
-webkit-line-clamp是webkit內(nèi)核的私有css屬性,用于進行多行省略,在安卓和ios上全支持。但它固定使用省略號,無法直接擴展。而且自帶了溢出截斷邏輯,作用于容器高度。仔細考察可發(fā)現(xiàn)它使用的省略號是單字符…,可以用文字css屬性如font-size,letter-spacing,color等控制。
<!DOCTYPE html><html><body> <style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style> <div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);"> <div style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);"> 騰訊成立于1998年11月,是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念,為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù),始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日,騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。 </div> </div> </body> </html>
設(shè)置外容器的font-size、letter-spacing、color,并在子容器里恢復(fù)就可以單獨設(shè)置省略號。這里外容器設(shè)置font-size的值等于2倍行高(余下要撐開的寬度可用letter-spacing補足,也可僅用font-size撐開全部的寬度),color為transparent就可以讓line-clamp既擠出文字又不截斷容器高度,外容器高度達到7行而不是默認(rèn)表現(xiàn)的6行,從而達到需要的溢出截斷效果
合體!定制多行省略
<!DOCTYPE html><html><body> <style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style> <div style="position: relative;line-height:18px;-webkit-animation: width-change 8s ease infinite;max-height: 108px;"> <div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: transparent;line-height: 18px;position: relative;"> <div style="font-size:12px;color: #000;display: inline;vertical-align: top;letter-spacing: 0;"> 騰訊成立于1998年11月,是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念,為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù),始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日,騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。 </div> <div style="position:absolute;top: 0;left: 50%;width: 100%;height: 100%;letter-spacing: 0;color: #000;font-size: 12px;background: rgba(173, 216, 230, 0.5);"> <div style="float: right;width: 50%;height: 100%;background: rgba(255, 192, 203, 0.5);"></div> <div style="float: right;width: 50%;height: 108px;background: hsla(223, 100%, 50%, 0.19);"></div> <div style="float: right;width: 50px;height: 18px;position: relative;background: rgba(255, 165, 0, 0.5);" class="">... 更多</div> </div> </div> </div> </body></html>
將-webkit-line-clamp實現(xiàn)的文字溢出截斷代碼為主體,疊加絕對定位同步的按需顯示...更多結(jié)構(gòu)。因為絕對定位,這里使用百分比簡化代碼。最外包一層結(jié)構(gòu)限制最大高度。
<!DOCTYPE html><html><body> <style> /* * 行高 h * 最大行數(shù) n * ...更多容器的寬 w * 字號 f */ @-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}} .ellipsis { position: relative; background: rgb(230, 230, 230); width: 260px; max-height: 108px; /* h*n */ line-height: 18px; /* h */ overflow: hidden; -webkit-animation: width-change 8s ease infinite; } .ellipsis-container { position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; /* n */ font-size: 50px; /* w */ color: transparent; } .ellipsis-content { color: #000; display: inline; vertical-align: top; font-size: 12px; /* f */ } .ellipsis-ghost { position:absolute; z-index: 1; top: 0; left: 50%; width: 100%; height: 100%; color: #000; } .ellipsis-ghost:before { content: ""; display: block; float: right; width: 50%; height: 100%; } .ellipsis-placeholder { content: ""; display: block; float: right; width: 50%; height: 108px; /* h*n */ } .ellipsis-more { position: relative; float: right; font-size: 12px; /* f */ width: 50px; /* w */ height: 18px; /* h */ margin-top: -18px; /* -h */ } </style> <div class="ellipsis"> <div class="ellipsis-container"> <div class="ellipsis-content"> 騰訊成立于1998年11月,是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念,為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù),始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日,騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。</div> <div class="ellipsis-ghost"> <div class="ellipsis-placeholder"></div> <div class="ellipsis-more">...更多</div> </div> </div> </div> </body></html>
將橙色塊偏移到正確位置,梳理了下代碼,最終實現(xiàn)了自適應(yīng)高度的定制多行省略,完美!從此媽媽再也不擔(dān)心我在省略號后面加?xùn)|西改東西了!恭喜你擊敗99%的同行了!
三、為什么這么做?
line-clamp有3宗罪
和 text-align:justify 一起用會使省略號和文字相疊
超出截斷后會截掉部分行高
省略號出現(xiàn)在單詞中間
定制省略當(dāng)然某問題啦
ext-align:justify時如期所示,沒問題!
截斷時如期所示,也沒問題!
省略號在有單詞時如期顯示,依然沒問題!
更別說點點點花樣增改
簡單增改文字加鏈接只是小case
用折角還是其他圖片表示文本溢出可以增添趣味
溢出時顯示溢出字?jǐn)?shù)增加了實用用途
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要給大家介紹了使用CSS中的text-overflow屬性來實現(xiàn)單行文本溢出顯示省略號,文章中有詳細的實現(xiàn)代碼,感興趣的同學(xué)可以自己動手嘗試一下2023-09-07
- 這篇文章主要介紹了純CSS實現(xiàn)“文本溢出截斷省略”的幾種方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2020-03-30
- 在實際開發(fā)的過程中,內(nèi)容溢出是經(jīng)常見到的。這篇文章主要介紹了淺談css溢出機制探究,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-18
- 這篇文章主要介紹了css多行文本溢出時出現(xiàn)省略號的示例的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-13
- 這篇文章主要介紹了css實現(xiàn)文本溢出顯示省略號的方法和示例分享,推薦給大家。2014-12-23
- li中的文本超出行寬自動隱藏,在一些新聞類的列表應(yīng)用中還是比較實用的,具體的實現(xiàn)css樣式如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-29
css overflow溢出隱藏(文字溢出時的自動隱藏處理)
css溢出隱藏一般用于當(dāng)內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時,通過設(shè)置css下的overflow屬性來隱藏其內(nèi)容2013-03-07標(biāo)題長度溢出時,自動顯示為省略“...”的Css text-overflow
內(nèi)容超出后自動隱藏并加省略標(biāo)記(...)引號的Css text-overflow:ellipsis; o...2011-07-27CSS教程:關(guān)于文字溢出問題的研究-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
首先引起對這個溢出問題進行研究是因為看到一個朋友的帖子,里面提到ie7下出現(xiàn)的文字溢出問題; 于是又重新翻了以前懌飛斑竹的帖子,他提到的是注釋引起的文字溢出問題2008-10-17- 設(shè)置text-overflow: ellipsis;即可實現(xiàn)文本溢出省略的效果,本文主要介紹了CSS 文字溢出:ellipsis在IE上不起效果的解決,具有一定的參考價值,感興趣的可以了解一下2023-11-23