亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Use flex layout in the outer layer, set the number of rows of height, or give the maximum height max-height in the outer layer
Place text in p in the inner layer, and display it normally

.outer {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.inner {
    display: block;
    oveflow: auto;
}

html structure:

<p class="outer">
    <p class="inner">
        文本內(nèi)容
    </p>
</p>
<p id="show-more"></p>

Then judge the height of the two:

if ($('.inner').height() > $('.outer').height()) {
    $('#show-more').show();
}

At this time, "See more" will be displayed

The idea is to judge based on the row height. Once the row height is greater than 1 row height, it means that there are two rows of content. Here is the code:

html is as follows:

    <p class="content">
      文本文本文本文本文本文本文本文本文本文本文本文本文本文本
      <a class="more" style="display:none">閱讀全文</a>
    </p>

js is as follows:

    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';
    }

It’s not easy to code, please like it if you like it~

Then judge the row height

The current text should have a separate dom, get its height and line height and calculate it dynamically

To provide an idea, you can set the line-height to 20px, and then after the page is rendered, use the offsetHeight attribute of the node in js, offsetHeight / 20is the number of lines

Use

elem.getClientRects()

That’s it