国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

黑科技：CSS定制多行省略

Leo_chen / 1319人閱讀

摘要：多行省略就是大段文字后面的花式點點點。但它固定使用省略號，無法直接擴展。年月日，騰訊控股有限公司在香港聯交所主板公開上市股票代號。

轉載請注明出處：http://hai.li/2017/03/08/css-...

什么是多行省略？

當字數多到一定程度就顯示省略號點點點。最初只是簡單的點點點，之后花樣越來越多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭...。多行省略就是大段文字后面的花式點點點。

同行這么做：

Google Plus用透明到白色的漸變遮罩，漸變遮罩在文字超出的時候才顯示，但無法擠出文字，且背景只能純色，不理想。

豌豆莢則更簡單粗暴換行顯示，換行顯示則文字未超出時依然顯示 ...xxx，更不理想！

我這樣做：

在QQ瀏覽器的頁面用了一個原創的mod-more UI組件，實現了定制的多行省略，還是純CSS的，領先同行一大截，贊！贊！贊！只可惜，mod-more組件的高度是固定的。對mod-more進一步進化，完美自適應高度，而且代碼簡化易用。

怎么做到的？

原理詳解！ 按需顯示...更多 





    
騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。

    
placeholder

    
...更多

利用右浮動原理——右浮動元素從右到左依次排列，不夠空間則換行。藍色塊、粉色塊、橙色塊依次右浮動，藍色塊高度小于6行文字時，橙色塊在右邊，藍色塊高度大于6行文字時，左下角剛好夠橙色塊排列的空間，于是橙色塊就到左邊了





    
騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。

    
placeholder

    
...更多

進一步將橙色塊偏移到正確位置就大功告成了！細心的同學會發現，將橙色塊加上漸變底就是Google Plus在用的方案。

文字溢出截斷 





    
騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。

-webkit-line-clamp是webkit內核的私有css屬性，用于進行多行省略，在安卓和ios上全支持。但它固定使用省略號，無法直接擴展。而且自帶了溢出截斷邏輯，作用于容器高度。仔細考察可發現它使用的省略號是單字符…，可以用文字css屬性如font-size,letter-spacing,color等控制。





    
騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。

設置外容器的font-size、letter-spacing、color，并在子容器里恢復就可以多帶帶設置省略號。這里外容器設置font-size的值等于2倍行高（余下要撐開的寬度可用letter-spacing補足，也可僅用font-size撐開全部的寬度），color:transparent可以讓line-clamp既擠出文字又不截斷容器高度，外容器高度達到7行而不是默認表現的6行，從而達到需要的溢出截斷效果

合體！定制多行省略 





    

        

        騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。
        

        

            

            

            
... 更多

將-webkit-line-clamp實現的文字溢出截斷代碼為主體，疊加絕對定位同步的按需顯示...更多結構。因為絕對定位，這里使用百分比簡化代碼。最外包一層結構限制最大高度。





    

        
騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。

        

            

            
...更多
為什么這么做？ line-clamp有3宗罪

text-align:justify一起用會使省略號和文字相疊

超出截斷后會截掉部分行高

省略號出現在單詞中間

定制省略當然某問題啦

text-align:justify時如期所示，沒問題！

截斷時如期所示，也沒問題！

省略號在有單詞時如期顯示，依然沒問題！

更別說點點點花樣增改

簡單增改文字加鏈接只是小case

用折角還是其他圖片表示文本溢出可以增添趣味

溢出時顯示溢出字數增加了實用用途

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116588.html

相關文章

  • 黑科技：CSS定制多行省略

    摘要：多行省略就是大段文字后面的花式點點點。但它固定使用省略號，無法直接擴展。年月日，騰訊控股有限公司在香港聯交所主板公開上市股票代號。 轉載請注明出處：http://hai.li/2017/03/08/css-... 什么是多行省略？ showImg(https://segmentfault.com/img/bVKr2N?w=660&h=325); 當字數多到一定程度就顯示省略號點點點。最...

    wpw 評論0 收藏0

  • SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評論0 收藏0

  • 談談text-overflow的那些坑和應對方法

    摘要：基本語法默認值，將溢出的文本裁減掉將溢出的文本用省略號來表示設置一個字符串用來表示溢出的文本兼容性上，除了外，其余兩個屬性兼容到了，所以大可放心使用。 原文地址：https://www.xksblog.top/the-p... text-overflow是CSS3中的屬性，它規定了當文本溢出其包含元素時以何種方式顯示。但在使用的時候，有時會發現這個text-overflow設置了屬性...

    nodejh 評論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候，遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

    張金寶 評論0 收藏0

  • 案例 - 收藏集 - 掘金

    摘要：同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候，遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

    huangjinnan 評論0 收藏0

發表評論

0條評論

Leo_chen

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<