使用JS计算元素中的文本的行数

工具函数代码

/*
* 计算元素中文字的行数
* el 元素容器
* */
export function computedTextRows(el) {
    const style = window.getComputedStyle(el, null);
    const elCss = {
        width: style.width,
        fontSize: style.fontSize,
        lineHeight: style.lineHeight,
        color: style.color,
        zIndex: -1,
        position: 'absolute',
        top: 0,
        left: 0,
        opacity: 0
    };
    let text = el.innerText;
    // console.log(elCss, text)
    const elCopy = document.createElement('p');
    elCopy.innerText = text;
    for (let cssKey in elCss) {
        elCopy.style[cssKey] = elCss[cssKey];
    }
    document.body.appendChild(elCopy);
    // 计算得到元素高度然后删除元素
    const elCopyHeight = elCopy.clientHeight;
    const elCopyLineHeight = parseInt(elCss.lineHeight);
    document.body.removeChild(elCopy);
    // console.log(elCopyHeight)
    const rows = Math.floor(elCopyHeight / elCopyLineHeight);
    return rows;
}

应用

应用环境：当元素中p里面的文本内容超过2行的时候，显示“展开/收缩”的按钮。

 <p v-html="desc" ref="infopRef" class="max2line"></p>
 <div class="open-more"
      v-show="showToggleBtn"
>
    展开/收起
</div>

data() {
    return {
        showToggleBtn: false
    }
},
watch: {
    desc: {
        handler(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    const pEl = this.$refs.infopRef;
                    const textRows = computedTextRows(pEl)
                    if (textRows > 2) {
                        this.showToggleBtn = true;
                    }
                });
            }
        },
        immediate: true
    }
}

这里面由于我添加了，这个样式：

.max2line{
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
 }

导致了多行情况下，文本超出2行会自动显示...，所以计算行数的函数中，我通过复制元容器的宽和字号、行距等元素，插入到body中，通过高度/行距来计算出行数。

相关资料