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

資訊專欄INFORMATION COLUMN

純CSS實(shí)現(xiàn)文字超過n行后省略功能

yeyan1996 / 3078人閱讀

摘要：在切圖階段，經(jīng)常會(huì)遇到，設(shè)計(jì)稿要求超出行后剩余文字省略，并用代替的需求。滟滟隨波千萬里，何處春江無月明多行文字限制字?jǐn)?shù)，并將多出字符用代替春江潮水連海平，海上明月共潮生。

在切圖階段，經(jīng)常會(huì)遇到，設(shè)計(jì)稿要求超出n行后剩余文字省略，并用...代替的需求。類似于下圖

單行文字

單行文字時(shí)實(shí)現(xiàn)比較容易，使用overflow: hidden和text-overflow: ellipsis即可，其中ellipsis即省略號(hào)的意思，使用width: 10em限制橫向字符數(shù)量。

多行文字

多行文字主要使用的CSS屬性如下：

  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  display:box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;

其中，clamp即夾子的意思，也就是說限制兩行，把內(nèi)容從中間夾住。box-orient屬性設(shè)置盒子的擺放方向。有點(diǎn)類似于flexbox中的row & coloum

demo

鏈接https://jsbin.com/gugekes/edi...

其中，HTML為




  
  
  JS Bin


  
demo1：?jiǎn)涡形淖窒拗谱謹(jǐn)?shù)，并將多出字符用“...”代替

  

    春江潮水連海平，
    海上明月共潮生。  
    滟滟隨波千萬里，  
    何處春江無月明!
  

  
  
demo2：多行文字限制字?jǐn)?shù)，并將多出字符用“...”代替

  

    春江潮水連海平，
    海上明月共潮生。  
    滟滟隨波千萬里，  
    何處春江無月明！  
    江流宛轉(zhuǎn)繞芳甸，  
    月照花林皆似霰；  
    空里流霜不覺飛，  
    汀上白沙看不見。  
    江天一色無纖塵，
    皎皎空中孤月輪。 
    江畔何人初見月？  
    江月何年初照人？  
    人生代代無窮已，  
    江月年年望相似。  
    不知江月待何人，  
    但見長(zhǎng)江送流水。  
    白云一片去悠悠，  
    青楓浦上不勝愁。 　 
    誰家今夜扁舟子？
    何處相思明月樓？
    可憐樓上月徘徊，
    應(yīng)照離人妝鏡臺(tái)。
    玉戶簾中卷不去，
    搗衣砧上指還來。
    此時(shí)相望不相聞，
    愿逐月華流照君。
    鴻雁長(zhǎng)飛光不度， 
    魚龍潛躍水成文。
    昨夜閑潭夢(mèng)落花

CSS為

.demo1 {
  width: 10em;
  border: 1px solid red;
  white-space:nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

.demo2 {
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  display:box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

實(shí)現(xiàn)的效果

[update]
Firefox有兼容性問題，不過可以通過設(shè)置max-height加overflow: hidden;來達(dá)到超出隱藏效果，只是沒有省略號(hào)了。算是彌補(bǔ)兼容問題吧。

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

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

相關(guān)文章

  • css使文字顯示兩行后顯示省略號(hào)

    摘要：本人喜歡把一些實(shí)用的東東拿過來，寫成文章或者收藏起來。于是乎直接上代碼狠狠的點(diǎn)擊，查看效果吧 本人喜歡把一些實(shí)用的東東拿過來，寫成文章或者收藏起來。于是乎... 直接上代碼： .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; ...

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

  • css使文字顯示兩行后顯示省略號(hào)

    摘要：本人喜歡把一些實(shí)用的東東拿過來，寫成文章或者收藏起來。于是乎直接上代碼狠狠的點(diǎn)擊，查看效果吧 本人喜歡把一些實(shí)用的東東拿過來，寫成文章或者收藏起來。于是乎... 直接上代碼： .article { color: #000000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; ...

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

  • 實(shí)現(xiàn)文字的省略號(hào)

    摘要：允許內(nèi)容頂開指定的容器邊界內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行也會(huì)發(fā)生正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄點(diǎn)個(gè)贊咯往期好文推薦判斷和及端打包有面試題純實(shí)現(xiàn)瀑布流多列及布局 在項(xiàng)目中有涉及實(shí)現(xiàn)一行或者第幾行后加省略號(hào)，在實(shí)現(xiàn)第幾行后加省略號(hào)的時(shí)候，使用的是-webkit-line-clamp、-webkit-box-orient屬性，會(huì)出現(xiàn)webpack打包-webkit...

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

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

0條評(píng)論

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