資訊專欄INFORMATION COLUMN
摘要：比如不超過兩行就全部顯示，超過兩行就把多余的字隱藏并顯示省略號。為了實現(xiàn)該效果，它需要組合其他外來的屬性。如果標(biāo)簽內(nèi)是英文字符當(dāng)標(biāo)簽內(nèi)是英文字符的時候你就會發(fā)現(xiàn)樣式失效了。英文是不會自動換行的，所以添加如下屬性以兼容英文字符。
問題描述
很多時候都會遇到有字?jǐn)?shù)控制的需求。比如不超過兩行就全部顯示，超過兩行就把多余的字隱藏并顯示省略號。利用-webkit-line-clamp屬性可以很簡單的實現(xiàn)這個需求。
關(guān)于-webkit-line-clamp屬性限制在一個塊元素顯示的文本的行數(shù)。如果標(biāo)簽內(nèi)是英文字符
-webkit-line-clamp 是一個 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。為了實現(xiàn)該效果，它需要組合其他外來的WebKit屬性。常見結(jié)合屬性：
display: -webkit-box; 必須結(jié)合的屬性 將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結(jié)合的屬性 設(shè)置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow 可以用來在多行文本的情況下，設(shè)定超出范圍的文本的隱藏方式。如text-overflow:ellipsis就是用省略號“...”隱藏超出范圍的文本。
當(dāng)標(biāo)簽內(nèi)是英文字符的時候你就會發(fā)現(xiàn)樣式失效了。英文是不會自動換行的，所以添加如下屬性以兼容英文字符。
word-wrap:break-word; word-break:break-all;開發(fā)中遇到的小問題： 失蹤的代碼～～～
我在vue文件中的style區(qū)域?qū)懥巳缦碌膌ess代碼，但是當(dāng)我啟動項目到chrome瀏覽器查看效果的時候，卻發(fā)現(xiàn)失蹤了一行代碼： -webkit-box-orient: vertical;。導(dǎo)致我樣式失效...
.linecamp{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
word-wrap:break-word;
word-break:break-all;
}
解決方案
最后找了半天原因，改了好久webpack配置都沒有解決問題。后來經(jīng)大神指點，是因為我這段less代碼寫在了vue文件里，而項目編譯時vue調(diào)postcss對less進行處理的時候把這行代碼刪掉了。
我把這段代碼抽離到了index.less里面，在vue文件直接引用這個樣式類linecamp。代碼出現(xiàn)～問題消失～
也算是很靈異的一個問題了，長見識～～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116783.html
摘要：在頁面顯示中我們經(jīng)常會需要進行省略，比如簡介里面的省略，比如固定中字?jǐn)?shù)超過限制之后的省略。單行文字的省略單行文字省略比較簡單。 在頁面顯示中我們經(jīng)常會需要進行省略，比如簡介里面的省略，比如固定div中字?jǐn)?shù)超過限制之后的省略。我們可以用css輕松做到。 單行文字的省略 單行文字省略比較簡單。關(guān)鍵代碼如下： .single { width: 280px; ...
摘要：在頁面顯示中我們經(jīng)常會需要進行省略，比如簡介里面的省略，比如固定中字?jǐn)?shù)超過限制之后的省略。單行文字的省略單行文字省略比較簡單。 在頁面顯示中我們經(jīng)常會需要進行省略，比如簡介里面的省略，比如固定div中字?jǐn)?shù)超過限制之后的省略。我們可以用css輕松做到。 單行文字的省略 單行文字省略比較簡單。關(guān)鍵代碼如下： .single { width: 280px; ...
摘要：允許內(nèi)容頂開指定的容器邊界內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行也會發(fā)生正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄點個贊咯往期好文推薦判斷和及端打包有面試題純實現(xiàn)瀑布流多列及布局 在項目中有涉及實現(xiàn)一行或者第幾行后加省略號，在實現(xiàn)第幾行后加省略號的時候，使用的是-webkit-line-clamp、-webkit-box-orient屬性，會出現(xiàn)webpack打包-webkit...
閱讀 2201·2021-11-25 09:43
閱讀 1170·2021-11-23 09:51
閱讀 3503·2021-11-23 09:51
閱讀 3632·2021-11-22 09:34
閱讀 1557·2021-10-09 09:43
閱讀 2126·2019-08-30 15:53
閱讀 3166·2019-08-30 14:07
閱讀 574·2019-08-28 18:14
