vue中html显示的问题

原创已于 2023-05-12 16:26:47 修改 · 4.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

于 2022-03-27 11:35:58 首次发布

岁月云——Web系统最佳实践同时被 2 个专栏收录

118 篇文章

订阅专栏

岁月会计云——前端开发

74 篇文章

订阅专栏

本文探讨了使用HTML和CSS实现文本多行省略的效果不佳的问题。通过具体实例展示了预期效果与实际呈现之间的差异，并提出了寻求解决方案的需求。

描述内容是用富文本框编辑的，实际的内容如下：

实际这里的多行省略是没有效果的，因为他不是纯文本，而是html标签。

<div class="main" v-html="book.description">
            </div>

.main{
        height:140px;
        font-size: 8px;
        text-overflow: -o-ellipsis-lastline;
        // 多行省略
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }