分享一个多行文本溢出隐藏组件

一行文本超出隐藏，非常简单，使用单纯的css就可以实现，多行文本隐藏借助chrome的 -webkit-line-clamp也是能够实现的，但是这个只在chrome浏览器上有效，是不兼容firefox等浏览器的， 下面分享一个使用js实现多行文本溢出隐藏的vue组件。 效果图如下

代码如下：

<template>
    <!-- 不要对它设置padding，否则会计算失败 -->
    <p ref="text" @click="onclick">
        {{text}}
    </p>
</template>

<script>

export default {
    props: {
        lineNumber: {
            type: Number,
            default: 1,
        },
        text: {
            type: String,
            default: ''
        }
    },
    watch: {
        text() {
            this.handleText();
        }
    },
    mounted() {
        this.handleText();
    },
    methods: {
        onclick() {
            this.$emit('click');
        },
        handleText() {
            const { lineNumber, text } = this;
            const textDom = this.$refs.text;
            const style = getComputedStyle(textDom);
            const lineHeight = parseInt(style.lineHeight);
            const height = lineHeight * lineNumber;
            const realRows = Math.floor(textDom.offsetHeight / lineHeight);
            this.$emit('lines', Math.min(realRows, lineNumber));
            if(textDom.offsetHeight > height) {
                let temp = '';
                let i = 0;
                textDom.innerHTML = temp;
                while(textDom.offsetHeight <= height) {
                    temp = text.substring(0, i + 1);
                    i++;
                    textDom.innerHTML = temp;
                }
                textDom.innerHTML = temp.substring(0, temp.length - 3) + '...'; // 替换string后面三个字符
            }
        }
    }
};
</script>

处理过程：

1. 获取文本的行高
2. 行高与行数相乘得到整块文本高度，即计算高度
3. 获取当前的元素的offsetHeight，即实际高度
4. 当实际高度大于计算高度说明已经溢出，需要重新生成显示文本
5. 通过循坏得到符合计算高度的显示文本，并在这段文本后追加...