微信小程序富文本换行问题文本溢出使用省略号

最新推荐文章于 2024-08-28 00:12:21 发布

咕噜咕噜的车轮向前

最新推荐文章于 2024-08-28 00:12:21 发布

阅读量1.6k

点赞数 1

分类专栏：开发过程总结文章标签：小程序

本文链接：https://blog.csdn.net/zhongmei121/article/details/115425593

版权

开发过程总结专栏收录该内容

66 篇文章 1 订阅

订阅专栏

本文介绍了如何利用HTML的<rich-text>标签结合内嵌div，通过设置CSS样式（-webkit-line-clamp、-webkit-box-orient等）来实现文本显示两行并超出部分用省略号隐藏的功能。这种方法常用于前端开发中处理多行文本显示限制。

摘要由CSDN通过智能技术生成

》需求场景：由于有高亮的需求，所以选择用富文本的标签<rich-text>，同时还有个需求是希望展示两行，然后溢出的情况用省略号。

》解决思路：在nodes节点里面包一层div，然后设置该div的样式为显示两行，溢出文本用省略号显示。

》代码：

html：

<rich-text class="rich_text product-name" :nodes="item.productName | formatRich"></rich-text>

js：

filters: {
        formatRich(val){
            return "<div class='rich-layout' style='-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;white-space: pre-wrap;'>" + val + "</div>"
        }
    },