主要是使用-webkit-line-clamp這個屬性進行限制顯示行數,通過計算文字在標簽內的顯示高度來計算當前文字行數,再與需要限制的行數進行對比,來確定是否顯示
代碼如下:
<!--Created by lmj on 2017/8/10.--><!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"><title>段落的收起與展開</title><script src="js/jquery.js"></script><style type="text/css">.info-shrink-text {display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}#info-manager-content {text-indent: 2em;font-size: 12px;color: #404040;font-family: 微軟雅黑;}.more-text {display: -webkit-box;width: 100%;-webkit-box-sizing: border-box;-webkit-box-pack: end;padding-right: 10px;color: #00a5e0;font-size: 14px;}</style></head><body><div class="ui-tab"><P id="info-manager-content" class="info-shrink-text">測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落的展開與收起.測試段落</P><div class="more-text">查看更多</div></div><script type="text/javascript">var isHide = true;var textContainer;function initView() {textContainer = $("#info-manager-content");var single=document.createElement("div");// 設置文字樣式single.style.cssText = "padding:0;visibility:hidden;font-familly:微軟雅黑;font-size:12px";single.innerHTML = "單";document.body.appendChild(single);//獲取該樣式下的單個文字的高度var singleHeight = single.offsetHeight;document.body.removeChild(single);//獲取整個段落的高度var paragraphHeight = textContainer.innerHeight();//設置你要限制的高度var limitHeight = 50;//當前文本行數var currentLine = (paragraphHeight/singleHeight).toFixed(0);//轉化為行數var lineCount = (limitHeight / singleHeight).toFixed(0);// alert(singleHeight+"----"+paragraphHeight+"---"+lineCount+"---"+currentLine);// 修改段落限制行數textContainer.attr("style", "-webkit-line-clamp:" + lineCount);// 設置按鈕的顯示或隱藏if (currentLine >= lineCount) {$(".more-text").show();isHide = true;} else {$(".more-text").hide();}}initView();window.onresize = function () {initView();};//添加點擊事件$(".more-text").on("click", function () {if (isHide) {textContainer.removeClass("info-shrink-text");$(this).text("收起");isHide = false;} else {textContainer.addClass("info-shrink-text");$(this).text("查看更多");isHide = true;}});</script></body></html>
新聞熱點
疑難解答
圖片精選
