在項(xiàng)目中，由于實(shí)際描述文字過多，導(dǎo)致初始頁(yè)面縱向長(zhǎng)度過長(zhǎng)，也使得余下信息利用率降低；
所以在文字過多的時(shí)候，初始化限制行數(shù)是有必要的
1. CSS單行文本溢出，顯示省略號(hào)
<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"> 我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，我要溢出，
我要溢出，我要溢出。 </div>
2. CSS多行文本溢出，顯示省略號(hào)
<div style="overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
-webkit-line-clamp:3;"> 我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，
我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，多行文本，我要溢出，
多行文本，我要溢出，多行文本，我要溢出，多行文本。 </div>
上面兩種適合標(biāo)簽里面只有文字的情況，而有時(shí)我們會(huì)遇到這樣的情況
<div> <p> <span>我是內(nèi)容</span> </p> <p> <span>我是內(nèi)容</span> </p> <p> <span>我是內(nèi)容</span> </p> <p> <span>我是內(nèi)容</span> </p> </div>
3. 第三種就是解決上面情況遇到的問題
我在網(wǎng)上看了很多例子，各有各的好，我使用的是給固定的line-height，換行也是每行在固定的的高度，
如：line-height:20px;，每次換空行也要讓空行是20px，這樣我們就可以利用20的倍數(shù)來(lái)合理的顯示內(nèi)容要
顯示的行數(shù)和內(nèi)容
<div class="text"> <p> 你不想要改變世界，但是你想要看日出？想要體驗(yàn)下傳說中的晨跑？想在晨跑中偶遇男神女神？想要看下
早上5點(diǎn)圖書館或訓(xùn)練場(chǎng)是否有人？想呼吸下還沒被汽車尾氣過度渲染的空氣？想給自己給愛人做個(gè)早餐？
你得早起呀！昨晚事情沒做完？考研單詞還差幾頁(yè)？趕飛機(jī)、趕火車？你得早起呀！你不想上班也得早起請(qǐng)假不是嘛～ </p> <p> 歡迎大家參加早起的鳥兒有蟲吃－21天早起計(jì)劃。一日之計(jì)在于晨，在沐浴晨光的過程中，
我們祝愿大家開始美好的一天！ </p> <span class="points">...</span> </div>
.text{color:#707070;padding:0 12px;position:relative;line-height:20px;overflow:hidden; margin-bottom:12px;max-height:60px;} .points{content:"...";position:absolute;bottom:0;right:16px;padding-left:40px;font-size:18px;
letter-spacing:3px;background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);background:
-moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right,
transparent, #fff 55%);} .text p{margin:0;} .text p+p{margin-top:20px;}
// 字體顯示 var showBoo = true; $(’.de-box .text’).on(’click’,function(){ if(showBoo){ console.log(1); $(’.de-box .text’).css(’maxHeight’,’none’); $(’.de-box .points’).hide(); showBoo = false; }else{ $(’.de-box .text’).css(’maxHeight’,’60px’); $(’.de-box .points’).show(); showBoo = true; }; });
這種情況會(huì)出現(xiàn)換行出現(xiàn)空行顯示的現(xiàn)象，這個(gè)問題留著下次來(lái)解說。
【 微信掃一掃 】
