成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

黑科技：CSS定制多行省略

wpw / 1697人閱讀

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

轉(zhuǎn)載請注明出處：http://hai.li/2017/03/08/css-...

什么是多行省略？

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

同行這么做：

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

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

我這樣做：

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

怎么做到的？

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





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

    
placeholder

    
...更多

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





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

    
placeholder

    
...更多

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

文字溢出截斷 





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

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





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

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

合體！定制多行省略 





    

        

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

        

            

            

            
... 更多

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





    

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

        

            

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

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

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

省略號出現(xiàn)在單詞中間

定制省略當然某問題啦

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

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

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

更別說點點點花樣增改

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

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

溢出時顯示溢出字數(shù)增加了實用用途

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50548.html

相關(guān)文章

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

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

    Leo_chen 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

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

    elliott_hu 評論0 收藏0

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

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

    nodejh 評論0 收藏0

  • 案例 - 收藏集 - 掘金

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

    張金寶 評論0 收藏0

  • 案例 - 收藏集 - 掘金

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

    huangjinnan 評論0 收藏0

發(fā)表評論

0條評論

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