純CSS實現文字超過n行后省略功能

yeyan1996 發布于2019-08-30 13:45 / 3066人閱讀

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

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

單行文字

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

多行文字

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

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

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

demo

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

其中，HTML為

JS Bin

demo1：單行文字限制字數，并將多出字符用“...”代替

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

demo2：多行文字限制字數，并將多出字符用“...”代替

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

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;
}

實現的效果

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

GPU云服務器云服務器 css省略省略號css js文字省略號 html5省略文字

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

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

css使文字顯示兩行后顯示省略號

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

BlackMass 2019-08-29 11:01 評論0 收藏0
css使文字顯示兩行后顯示省略號

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

chuyao 2019-08-01 15:28 評論0 收藏0
實現文字的省略號

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

beanlam 2019-08-23 12:21 評論0 收藏0