超出行数--变成省略号,显示展开与收起按钮

1,022 阅读1分钟

示列:

文本超过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("收起&lt;&lt;");
		state = false;
	} else {
		$(this).prev().prev().addClass('lin_6');
		$(this).html("展开&gt;&gt;");
		state = true;
	}
});
}, 500);
//展开收起 --end