阅读全文文字溢出过滤器，超过字数显示省略号。实现展开收起功能

最新推荐文章于 2023-12-22 10:48:06 发布

南北极之间

最新推荐文章于 2023-12-22 10:48:06 发布

阅读量759

点赞数

分类专栏：前端工具代码文章标签：文本溢出隐藏显示阅读全文展开收起

本文链接：https://blog.csdn.net/qq_22182989/article/details/108451548

版权

前端工具代码专栏收录该内容

15 篇文章 1 订阅

订阅专栏

为了实现知乎那种效果：

普通的文本溢出隐藏。无法解决问题。

参考：https://segmentfault.com/q/1010000023908604

// 这个文件用来写全局过滤器

// 阅读全文文字溢出过滤器，超过字数显示省略号
let ellipsis = (value, len=180) => {
    if (!value) return ''
    if (value.length > len) {
        return value.slice(0, len) + '...'
    }
    return value
}


export {
    ellipsis
}

使用方法：其实用的也是js截取字符串

            <div class="question-content">
              {{item.question.questionContent | ellipsis(140)}}
              <el-button class="read-whole-btn" v-if="item.question.questionContent && item.question.questionContent.length > 140">
                <span>阅读全文</span>
                <i class="iconfont">&#xe610;</i>
              </el-button>
            </div>