首頁  >  問答  >  主體

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

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

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

大家讲道理大家讲道理2736 天前1697

全部回覆(6)我來回復

  • 我想大声告诉你

    我想大声告诉你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();
    }
    

    這個時候顯示「看更多」

    回覆
    0
  • 给我你的怀抱

    给我你的怀抱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';
        }

    碼字不易,喜歡請按讚~

    回覆
    0
  • 阿神

    阿神2017-05-16 13:10:51

    那就判斷行高吧

    回覆
    0
  • 巴扎黑

    巴扎黑2017-05-16 13:10:51

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

    回覆
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-16 13:10:51

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

    回覆
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-16 13:10:51

    elem.getClientRects()
    

    就好了

    回覆
    0
  • 取消回覆