vue中实现文本超过指定行省略显示组件_vue3 文本省略类-优快云博客

本文介绍了一个Vue组件，用于实现文本溢出时自动换行并限制显示行数的功能。通过动态调整文本内容确保不会超出设定的最大行数，并在文本截断时添加省略号。此方案适用于需要对长文本进行美观展示的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接上代码

<template>
  <div class="text-limit">
    <span class="hide-text" ref="onlyOne">{{value ? value.slice(0, 2) : "中国"}}</span>
    <span class="hide-text" ref="hideText"></span>
    {{resultStr}}
  </div>
</template>

<script>
    export default {
        name: "TextLimit",

        props: {
            value: {
                type: String
            },
            // 显示几行
            limit: {
                type: Number,
                require: true
            },
            // 尾巴，默认省略 ...
            tail: {
                type: String
            }
        },

        data() {
            return {
                resultStr: this.value,
                resultTail: this.tail || '...'
            }
        },

        computed: {
            result(){
                return this.value
            }
        },

        mounted() {
            // 如果没有传进来值，不用处理
            if (!this.value) {return}
            // 获取每一行文本的高度
            let lineHeight = this.$refs.onlyOne.clientHeight;
            // 获取隐藏文本标签（通过往这个标签添加文本判断实时的高度来处理最终需要显示的文本）
            let hideText = this.$refs.hideText;
            // 隐藏文本标签添加传进来的文本
            hideText.innerHTML = this.value;
            // 获取隐藏文本高度
            let currentHeight = hideText.clientHeight;
            // 如果小于等于需要限制的行数，不用处理
            let lineNum = Math.ceil(currentHeight / lineHeight);
            if (lineNum <= this.limit) {return}

            // 文本长度
            let len = this.value.length;
            // lineNum - 1 是为了获取到的值大于限制行，好做 -- 处理
            let end = Math.ceil(len * (this.limit / (lineNum - 1)));

            // 不断减掉一个字，直达行数达到要求
            while (lineNum > this.limit) {
                end--;
                hideText.innerHTML = this.value.slice(0, end) + this.resultTail;
                currentHeight = this.$refs.hideText.clientHeight;
                lineNum = Math.ceil(currentHeight / lineHeight);
            }
            
            this.resultStr = this.value.slice(0, end) + this.resultTail
        }
    }
</script>

<style scoped lang="less">
  .text-limit {
    position: relative;

    .hide-text {
      position: absolute;
      width: 100%;
      visibility:hidden;
    }
  }
</style>