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進(jìn)一步進(jìn)化，完美自適應(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>
利用右浮動原理——右浮動元素從右到左依次排列，不夠空間則換行。藍(lán)色塊、粉色塊、橙色塊依次右浮動，藍(lán)色塊高度小于6行文字時，橙色塊在右邊，藍(lán)色塊高度大于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>
進(jìn)一步將橙色塊偏移到正確位置就大功告成了！細(xì)心的同學(xué)會發(fā)現(xiàn)，將橙色塊加上漸變底就是Google Plus在用的方案。