有沒有辦法計算一段文字在不同大小畫面下所佔用的行數?
如圖,如果在使用者手機螢幕寬度下內容超出兩行則顯示閱讀全文,否則不顯示閱讀全文
我想大声告诉你2017-05-16 13:10:51
外層使用flex佈局,設定高度行數, 或外層給定最大高度max-height
內層p放文字, 正常顯示
.outer {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
}
.inner {
display: block;
oveflow: auto;
}
html結構:
<p class="outer">
<p class="inner">
文本内容
</p>
</p>
<p id="show-more"></p>
然後判斷兩者高度:
if ($('.inner').height() > $('.outer').height()) {
$('#show-more').show();
}
這個時候顯示「看更多」
给我你的怀抱2017-05-16 13:10:51
思路是根據行高判斷,一旦行高大於1行高度,表示內容出現了兩行。以下是代碼:
html 如下:
<p class="content">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本
<a class="more" style="display:none">阅读全文</a>
</p>
js如下:
const contentp = document.getElementsByClassName('content')[0];
const style = window.getComputedStyle(contentp, null);
const height = parseInt(style.height, 10);
const lineHeight = parseInt(style.lineHeight, 10);
if (height / lineHeight > 1) { //若行高大于1行,则显示阅读全文
document.getElementsByClassName('more')[0].style.display = 'block';
}
碼字不易,喜歡請按讚~
曾经蜡笔没有小新2017-05-16 13:10:51
提供一個思路,你可以設定行高line-height為20px,然後等頁面渲染完後,在js中用節點的offsetHeight屬性,offsetHeight / 20
就是行數