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

資訊專(zhuān)欄INFORMATION COLUMN

line-clamp無(wú)法生效的解決方案

468122151 / 2935人閱讀

摘要：如果你在網(wǎng)上找了有關(guān)無(wú)法生效而沒(méi)有收獲的，希望這篇文章能幫到你在近一段時(shí)間工作中，遇到了一個(gè)需求一個(gè)簡(jiǎn)單的制作當(dāng)中有超出兩行文字省略且顯示省略號(hào)筆主還是實(shí)習(xí)萌新，記得自己以前寫(xiě)類(lèi)似效果的是單行，代碼如下那么多行換行，在和搜索引擎后探究

如果你在網(wǎng)上找了有關(guān) line-clamp 無(wú)法生效而沒(méi)有收獲的，希望這篇文章能幫到你

在近一段時(shí)間工作中，遇到了一個(gè)需求

一個(gè)簡(jiǎn)單的item制作
當(dāng)中有超出兩行文字省略且顯示省略號(hào)

筆主還是實(shí)習(xí)萌新，記得自己以前寫(xiě)類(lèi)似效果的是單行，代碼如下

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

那么多行換行，在MDN和搜索引擎后探究一番
得出了需要調(diào)用以下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樣式，就能得到上述效果，網(wǎng)上給的答案大概是這個(gè)意思....

當(dāng)然，如果是這么一帆風(fēng)順也就沒(méi)有今天的文章了


如運(yùn)行結(jié)果所示，似乎我們的CSS樣式并沒(méi)有生效
檢查CSS樣式

看起來(lái)并無(wú)問(wèn)題，還是上網(wǎng)查閱了一番，得到以下結(jié)果：

1.默認(rèn)編譯的時(shí)候，會(huì)過(guò)濾 -webkit-box-orient: vertical;
以及
2.安裝依賴(lài)這個(gè)依賴(lài)：npm i -S optimize-css-assets-webpack-plugin，并且注釋掉中的一段代碼：
諸如此類(lèi)....

不過(guò)本著學(xué)習(xí)態(tài)度，自己還是嘗試調(diào)試了一下
在將 overflow 屬性注釋掉的情況，我發(fā)現(xiàn)了是這種的效果

顯而易見(jiàn)，不是CSS不生效，而是Div內(nèi)沒(méi)有換行
而沒(méi)有換行，則導(dǎo)致line-clamp沒(méi)有生效
所以，接下來(lái)要做的，是要將Div設(shè)置啟動(dòng)換行效果

overflow-wrap: break-word;
參考資料：MDN-overflow-wrap

最終效果

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

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

相關(guān)文章

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

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

    Leo_chen 評(píng)論0 收藏0

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

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

    wpw 評(píng)論0 收藏0

  • 【前端芝士樹(shù)】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào)

    摘要：前端芝士樹(shù)純實(shí)現(xiàn)多行文本溢出顯示省略號(hào)使用來(lái)控制行數(shù)由于用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)這是一個(gè)不規(guī)范的屬性，它沒(méi)有出現(xiàn)在規(guī)范草案中，為了實(shí)現(xiàn)該效果，它需要組合其他外來(lái)的屬性。 【前端芝士樹(shù)】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào) 使用-webkit-line-clamp來(lái)控制行數(shù) 由于-webkit-line-clamp 用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù),這是一個(gè)不規(guī)范的屬性（u...

    CNZPH 評(píng)論0 收藏0

  • css-從筆試題中看知識(shí)

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

    tainzhi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<