在項(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>
早起的鳥兒有蟲吃。一日之計(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;
};
});
以上方法僅供參考绷柒，如有更好的方法歡迎大家留言志于。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
