web前端如何判断一段内容是否满两行？(屏幕宽度不同情况下)

Question

有没有什么办法计算一段文字在不同大小屏幕下占用的行数？

如图，如果在用户手机屏幕宽度下内容超出两行则显示阅读全文，否则不显示阅读全文

Answer 1

思路是根据行高判断，一旦行高大于1行高度，说明内容出现了两行。以下是代码：

html 如下：

    <div class="content">
      文本文本文本文本文本文本文本文本文本文本文本文本文本文本
      <a class="more" style="display:none">阅读全文</a>
    </div>

js如下：

    const contentDiv = document.getElementsByClassName('content')[0];
    const style = window.getComputedStyle(contentDiv, 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 2

外层使用flex布局，设定高度行数, 或者外层给定最大高度max-height
内层div放文字, 正常显示

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

html结构：

<div class="outer">
    <div class="inner">
        文本内容
    </div>
</div>
<div id="show-more"></div>

然后判断两者高度：

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

这个时候显示“查看更多”

Answer 3

this.$nextTick(() => {

const e = this.$refs.infoShort
e.scrollHeight > e.clientHeight && (this.showAllDesc = true)

})
css:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;

Answer 4

那就判断行高吧

Answer 5

当前文本应该有一个单独的dom，获取其高度，行高 动态计算

Answer 6

提供一种思路，你可以设置行高line-height为20px，然后等页面渲染完后，在js中用节点的offsetHeight属性，offsetHeight / 20就是行数

Answer 7

用

elem.getClientRects()

就好了