javascript - web前端如何判斷一段內容是否滿兩行？ (螢幕寬度不同情況下)

Question

有沒有辦法計算一段文字在不同大小畫面下所佔用的行數？

如圖，如果在使用者手機螢幕寬度下內容超出兩行則顯示閱讀全文，否則不顯示閱讀全文

Answer 1

外層使用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();
}

這個時候顯示「看更多」

Answer 2

思路是根據行高判斷，一旦行高大於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';
    }

碼字不易，喜歡請按讚~

Answer 3

那就判斷行高吧

Answer 4

當前文本應該有一個單獨的dom，取得其高度，行高 動態計算

Answer 5

提供一個思路，你可以設定行高line-height為20px，然後等頁面渲染完後，在js中用節點的offsetHeight屬性，offsetHeight / 20就是行數

Answer 6

用

elem.getClientRects()

就好了