line-clamp無法生效的解決方案

468122151 發布于2019-08-30 11:10 / 2890人閱讀

摘要：如果你在網上找了有關無法生效而沒有收獲的，希望這篇文章能幫到你在近一段時間工作中，遇到了一個需求一個簡單的制作當中有超出兩行文字省略且顯示省略號筆主還是實習萌新，記得自己以前寫類似效果的是單行，代碼如下那么多行換行，在和搜索引擎后探究

如果你在網上找了有關 line-clamp 無法生效而沒有收獲的，希望這篇文章能幫到你

在近一段時間工作中，遇到了一個需求

一個簡單的item制作
當中有超出兩行文字省略且顯示省略號

筆主還是實習萌新，記得自己以前寫類似效果的是單行，代碼如下

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

那么多行換行，在MDN和搜索引擎后探究一番
得出了需要調用以下CSS樣式

-webkit-line-clamp:2;
-webkit-box-orient: vertical;
display: -webkit-box;

參考鏈接MDN -webkit-line-clamp
作者描述？Line Clampin’ (Truncating Multiple Line Text)

在去掉white-space屬性后添加查到得CSS樣式，就能得到上述效果，網上給的答案大概是這個意思....

當然，如果是這么一帆風順也就沒有今天的文章了

如運行結果所示，似乎我們的CSS樣式并沒有生效
檢查CSS樣式

看起來并無問題，還是上網查閱了一番，得到以下結果：

1.默認編譯的時候，會過濾 -webkit-box-orient: vertical;
以及
2.安裝依賴這個依賴：npm i -S optimize-css-assets-webpack-plugin，并且注釋掉中的一段代碼：
諸如此類....

不過本著學習態度，自己還是嘗試調試了一下
在將 overflow 屬性注釋掉的情況，我發現了是這種的效果

顯而易見，不是CSS不生效，而是Div內沒有換行
而沒有換行，則導致line-clamp沒有生效
所以，接下來要做的，是要將Div設置啟動換行效果

overflow-wrap: break-word;

參考資料：MDN-overflow-wrap

最終效果

GPU云服務器云服務器解決阿里云服務器無法訪問80端口的問題服務器沒有生效的云盤云服務器的生效時間掛載的磁盤無法看見

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

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

黑科技：CSS定制多行省略

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

Leo_chen 2019-08-30 15:53 評論0 收藏0
黑科技：CSS定制多行省略

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

wpw 2019-08-01 16:29 評論0 收藏0
【前端芝士樹】純CSS實現多行文本溢出顯示省略號

摘要：前端芝士樹純實現多行文本溢出顯示省略號使用來控制行數由于用來限制在一個塊元素顯示的文本的行數這是一個不規范的屬性，它沒有出現在規范草案中，為了實現該效果，它需要組合其他外來的屬性。【前端芝士樹】純CSS實現多行文本溢出顯示省略號使用-webkit-line-clamp來控制行數由于-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性（u...

CNZPH 2019-08-30 15:54 評論0 收藏0
css-從筆試題中看知識

摘要：常見子元素居中方式原理是絕對定位是根據左上角，然后讓子元素回移就居中了水平居中，條件是當前元素指定寬和高水平垂直居中描述圖形的語言中的每個元素都是可用的。您可以為某個元素附加事件處理器每個被繪制的圖形均被視為對象。常見子元素居中方式 (1) position: absolute: position: absolute; + transform: translate(-50%, -50...

tainzhi 2019-08-30 15:55 評論0 收藏0