javascript - 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

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

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

Answer 3

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

Answer 4

先不给他 line-clamp；然后获取p css('line-height').然后用p的高度除 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这些属性的设置可能会干扰你的计算结果.