示列:
文本超过6行后 显示省略号。 并显示-- 展开 - 与 - 收起 按钮
css:
.lin_6 { text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;}
html:
<div id="tmr" class="lin_6 t-l-1">
{php}$xieyi = getConfigNotice('goupiao');{/php}
{$xieyi|raw}
</div>
<div class="h5"></div>
<div class="col-md-11 more_btn text-right dh">
展开更多
</div>
js:
// 展开收起 --star
setTimeout(function() {
// (offsetHeight)获取 #tmr div 的整块内容高度,包含字体的内外边距与行高 var hjbp = document.getElementById("tmr").offsetHeight;
var $qyxx = $('.t-l-1');
if (hjbp >= 132) {
$qyxx.addClass('lin_6');
$qyxx.next().next('.more_btn').removeClass('dh')
}
//对收起做点击事件
var state = true;
$(document).on("click", ".more_btn", function() {
if (state == true) {
$(this).prev().prev().removeClass('lin_6');
$(this).html("收起<<");
state = false;
} else {
$(this).prev().prev().addClass('lin_6');
$(this).html("展开>>");
state = true;
}
});
}, 500);
//展开收起 --end