javascript - How does the web front-end determine whether a piece of content is two lines long? (When the screen width is different)

Question

Is there any way to calculate the number of lines a piece of text takes up on different screen sizes?
< /p>

As shown in the figure, if the content exceeds two lines under the width of the user's mobile phone screen, the full text will be displayed, otherwise the full text will not be displayed

Answer 1

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">
        文本内容
    </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

Answer 2

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~

Answer 3

Then judge the row height

Answer 4

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

Answer 5

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

Answer 6

Use

elem.getClientRects()

That’s it