js如何判断行数大神们

Question

现在有个文言部分在手机上显示，想让他在手机上超过三行显示一个展开/收起的按钮(按钮展开收起功能已经实现)，现在该怎么判断这个文言是不是超过了三行呢？有什么好点的办法吗大神们，请教！！

Answer 1

.xxx {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-height: 20px;
max-height: 60px;
}

Answer 2

可以放一个div在左侧出屏幕的地方，比如left=-1000px，宽度和你需要显示文字的div的宽度保持一致。然后把要显示的内容放到出屏幕的那个div中。因为你是知道字体大小或者行高的，只要获取一下出屏幕的那个div的高度和你三行文字应该有的高度做一个比较就知道是不是超过三行了。

Answer 3

应该是判断字符长度吧，不过不同的手机，三行显示的字符又不一样....
或者可以先容内容全部显示，判断高度，然后做隐藏

虽然上面的2个思路都可以实现，好像都有点坑的味道...

Answer 4

先不给他 line-clamp；然后获取div css('line-height').然后用div的高度除 lin-height 如果小于3就是三行以内

Answer 5

function getLineTotal(el) {
    let styles = window.getComputedStyle(el, null);
    let totalHeight = styles.height.replace('px', '');
    let lineHeight = styles.lineHeight.replace('px', '');
    return Math.ceil(totalHeight / lineHeight);
}

思路: 利用计算属性获取文本所在元素节点的盒子高度和行高, 然后高度 / 行高.

注意: border-box和padding这些属性的设置可能会干扰你的计算结果.