css3 - 一篇文章有好多段 怎么控制整篇文章顯示多少行 剩余省略 而不是每段控制
問(wèn)題描述
<p>有一晚，我做了一個(gè)夢(mèng)。我和鍾書(shū)一同散步，說(shuō)說(shuō)笑笑，走到了不知什么地方。太陽(yáng)已經(jīng)下山，黃昏薄幕，蒼蒼茫茫中，忽然鍾書(shū)不見(jiàn)了。我四顧尋找， 不見(jiàn)他的影蹤。我喊他，沒(méi)人應(yīng)。</p><p>只我一人，站在荒郊野地里，鍾書(shū)不知到哪里去了。我大聲呼喊，連名帶姓地喊。喊聲落在曠野里，好像給吞吃了似的，沒(méi)留下一點(diǎn)依稀仿佛的音響。徹底的寂靜，給沉沉夜色增添了分量，也加深了我的孤凄。往前看去，是一層深似一層的昏暗。我腳下是一條沙土路，旁邊有林木，有潺潺流水，看不清楚溪流有多么寬廣。向后看去，好像是連片的屋宇房舍，是有人煙的去處，但不見(jiàn)燈火，想必相離很遠(yuǎn)了。鍾書(shū)自顧自先回家了嗎?我也得回家呀。我正待尋覓歸路，忽見(jiàn)一個(gè)老人拉著一輛空的黃包車(chē)，忙攔住他。他倒也停了車(chē)。可是我怎么也說(shuō)不出要到哪里去，惶急中忽然醒了。鍾書(shū)在我旁邊的床上睡得正酣呢。</p><p>我轉(zhuǎn)側(cè)了半夜等鍾書(shū)醒來(lái)，就告訴他我做了一個(gè)夢(mèng)，如此這般;于是埋怨他怎么一聲不響地撇下我自顧自走了。鍾書(shū)并不為我夢(mèng)中的他辯護(hù)，只安慰我說(shuō)：那是老人的夢(mèng)，他也常做。</p><p>是的，這類(lèi)的夢(mèng)我又做過(guò)多次，夢(mèng)境不同而情味總相似。往往是我們兩人從一個(gè)地方出來(lái)，他一晃眼不見(jiàn)了。我到處問(wèn)詢(xún)，無(wú)人理我。我或是來(lái)回尋找，走入一連串的死胡同，或獨(dú)在昏暗的車(chē)站等車(chē)，等那末一班車(chē)，車(chē)也總不來(lái)。夢(mèng)中凄凄惶惶，好像只要能找到他，就能一同回家。</p><p>鍾書(shū)大概是記著我的埋怨，叫我做了一個(gè)長(zhǎng)達(dá)萬(wàn)里的夢(mèng)。</p>
.swiper-wrapper .swiper-slide:nth-of-type(2) p:nth-child(5) p { word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /*限制在一個(gè)塊元素顯示的文本的行數(shù)*/ -webkit-box-orient: vertical; overflow: hidden;}
這樣就會(huì)每段都省略怎么能整片實(shí)現(xiàn)這樣的效果
問(wèn)題解答
回答1：jquery.dotdotdot.min.js，你值得擁有。
回答2：<!DOCTYPE html><html> <head><meta charset='UTF-8'><title>多行文字省略……</title><style type='text/css'> .wrap{width: 400px;height:450px;background: #ccc;padding: 10px;margin: 10px auto;line-height: 30px; }</style><script src='http://m.cgvv.com.cn/wenda/jquery-1.11.1.min.js'></script><script type='text/javascript'> $(function(){//限制字?jǐn)?shù)var num=400;if($(’.wrap’).text().length>num){ $(’.wrap’).html($(’.wrap’).html().substring(0,num)); $(’.wrap’).html($(’.wrap’).html()+’......’);} }); </script> </head> <body><p class='wrap'> <p>有一晚，我做了一個(gè)夢(mèng)。我和鍾書(shū)一同散步，說(shuō)說(shuō)笑笑，走到了不知什么地方。太陽(yáng)已經(jīng)下山，黃昏薄幕，蒼蒼茫茫中，忽然鍾書(shū)不見(jiàn)了。我四顧尋找， 不見(jiàn)他的影蹤。我喊他，沒(méi)人應(yīng)。</p><p>只我一人，站在荒郊野地里，鍾書(shū)不知到哪里去了。我大聲呼喊，連名帶姓地喊。喊聲落在曠野里，好像給吞吃了似的，沒(méi)留下一點(diǎn)依稀仿佛的音響。徹底的寂靜，給沉沉夜色增添了分量，也加深了我的孤凄。往前看去，是一層深似一層的昏暗。我腳下是一條沙土路，旁邊有林木，有潺潺流水，看不清楚溪流有多么寬廣。向后看去，好像是連片的屋宇房舍，是有人煙的去處，但不見(jiàn)燈火，想必相離很遠(yuǎn)了。鍾書(shū)自顧自先回家了嗎?我也得回家呀。我正待尋覓歸路，忽見(jiàn)一個(gè)老人拉著一輛空的黃包車(chē)，忙攔住他。他倒也停了車(chē)。可是我怎么也說(shuō)不出要到哪里去，惶急中忽然醒了。鍾書(shū)在我旁邊的床上睡得正酣呢。</p><p>我轉(zhuǎn)側(cè)了半夜等鍾書(shū)醒來(lái)，就告訴他我做了一個(gè)夢(mèng)，如此這般;于是埋怨他怎么一聲不響地撇下我自顧自走了。鍾書(shū)并不為我夢(mèng)中的他辯護(hù)，只安慰我說(shuō)：那是老人的夢(mèng)，他也常做。</p><p>是的，這類(lèi)的夢(mèng)我又做過(guò)多次，夢(mèng)境不同而情味總相似。往往是我們兩人從一個(gè)地方出來(lái)，他一晃眼不見(jiàn)了。我到處問(wèn)詢(xún)，無(wú)人理我。我或是來(lái)回尋找，走入一連串的死胡同，或獨(dú)在昏暗的車(chē)站等車(chē)，等那末一班車(chē)，車(chē)也總不來(lái)。夢(mèng)中凄凄惶惶，好像只要能找到他，就能一同回家。</p><p>鍾書(shū)大概是記著我的埋怨，叫我做了一個(gè)長(zhǎng)達(dá)萬(wàn)里的夢(mèng)。</p></p> </body></html>
效果如圖：
預(yù)覽：https://ityanxi.github.io/seg...
回答3：
這個(gè)好像只有chrome支持吧
實(shí)現(xiàn)整段省略應(yīng)該在p元素的父節(jié)點(diǎn)上添加 -webkit-line-clamp: x;的樣式屬性吧
回答5：https://codepen.io/anon/pen/e...
@mixin autoCuteContext($line, $line-height: 1.5){ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; line-height: $line-height; max-height: ($line-height * $line) + em;}p{ @include autoCuteContext(3);}回答6：
你必須給一個(gè)整體的高度，然后再給行數(shù)，讓超出的部分 hidden
相關(guān)文章：
1. javascript - JS如何取對(duì)稱(chēng)范圍的隨機(jī)數(shù)？2. 數(shù)據(jù)庫(kù) - mysql如何處理數(shù)據(jù)變化中的事務(wù)？3. java - ehcache緩存用的是虛擬機(jī)內(nèi)存么？4. 關(guān)于docker下的nginx壓力測(cè)試5. java - mongodb分片集群下，count和聚合統(tǒng)計(jì)問(wèn)題6. android - java 泛型不支持?jǐn)?shù)組，那么RxJava的Map集合有什么方便的手段可以定義獲得一串共同父類(lèi)集合數(shù)據(jù)呢？7. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問(wèn)題 麻煩幫我看一下8. 服務(wù)器端 - 采用nginx做web服務(wù)器，C++開(kāi)發(fā)應(yīng)用程序 出現(xiàn)拒絕連接請(qǐng)求？9. javascript - 有什么兼容性比較好的辦法來(lái)判斷瀏覽器窗口的類(lèi)型？10. python - pandas按照列A和列B分組，將列C求平均數(shù)，怎樣才能生成一個(gè)列A,B,C的dataframe
網(wǎng)公網(wǎng)安備