作者：weilong，騰訊 web前端開發 工程師
商業轉載請聯系騰訊WeTest獲得授權，非商業轉載請注明出處。
WeTest導讀
拿到設計MM的設計稿，Oh NO，點點點后面又雙叒叕加內容了，彈丸之地，勞心費神啊！！可憐我們UI開發GG每次苦口婆心說，微臣不是不做，是辦不到啊！很是愧疚。而現在，自從用了定制多行省略，腰不酸了，手也不疼了，接起需求來，毫不費勁！
一、什么是多行省略？
當字數多到一定程度就顯示省略號點點點。最初只是簡單的點點點，之后花樣越來越多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭...。多行省略就是大段文字后面的花式點點點。
同行這么做：
- Google Plus用透明到白色的漸變遮罩，漸變遮罩在文字超出的時候才顯示，但無法擠出文字，且背景只能純色，不理想。
- 豌豆莢則更簡單粗暴換行顯示，換行顯示則文字未超出時依然顯示 ...xxx，更不理想！
我們這樣做：
在QQ瀏覽器的頁面用了一個原創的mod-more UI組件，實現了定制的多行省略，還是純CSS的，領先同行一大截，贊！贊！贊！只可惜，mod-more組件的高度是固定的。對mod-more進一步進化，完美自適應高度，而且代碼簡化易用。
二、怎么做到的？
定制多行省略 = 按需顯示...更多 + 文字溢出截斷，按需顯示...更多是用浮動特性實現，文字溢出階段可以用前置浮動和line-clamp實現，QQ瀏覽器現有方案就是前置浮動，但缺點是高度固定，使用line-clamp則自適應高度，完美！限於篇幅，這里只提line-clamp的實現方案，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月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號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>
<!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月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號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>
進一步將橙色塊偏移到正確位置就大功告成了！細心的同學會發現，將橙色塊加上漸變底就是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月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div> </div> </body></html>
-webkit-line-clamp是webkit內核的私有css屬性，用於進行多行省略，在安卓和ios上全支持。但它固定使用省略號，無法直接擴展。而且自帶了溢出截斷邏輯，作用於容器高度。仔細考察可發現它使用的省略號是單字符…，可以用文字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月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div> </div> </body></html>
設置外容器的font-size、letter-spacing、color，並在子容器里恢復就可以單獨設置省略號。這里外容器設置font-size的值等於2倍行高（余下要撐開的寬度可用letter-spacing補足，也可僅用font-size撐開全部的寬度），color為transparent就可以讓line-clamp既擠出文字又不截斷容器高度，外容器高度達到7行而不是默認表現的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月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號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實現的文字溢出截斷代碼為主體，疊加絕對定位同步的按需顯示...更多結構。因為絕對定位，這里使用百分比簡化代碼。最外包一層結構限制最大高度。
<!DOCTYPE html><html><body> <style> /* * 行高 h * 最大行數 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月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div> <div class="ellipsis-ghost"> <div class="ellipsis-placeholder"