vue3 v-html的内容实现两行 超出省略号

在 Vue3 中，如果你想使用 `v-html` 指令来显示富文本内容，并且当内容超过一行时实现省略号的效果，你可以结合 CSS 和一些 JavaScript 来完成。首先，你需要设置一个合适的容器来容纳内容，然后限制其高度并添加溢出隐藏 (`overflow: hidden`)。接着，使用 `...` 作为省略号的占位符，再通过 JavaScript 监听容器的滚动事件，判断是否需要显示更多内容。

HTML 部分：

<div id="content" v-html="longText" :style="{ height: '50px', overflow: 'hidden' }">
  <span class="ellipsis">...</span>
</div>

CSS 部分：

.ellipsis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 只显示两行 */
  max-height: 50px;
  overflow: hidden;
}

JavaScript 部分（如果你使用的是Vue实例的 `mounted()` 或者自定义的 `mounted()` 生命周期钩子函数）：

export default {
  data() {
    return {
      longText: '<p>这是非常长的文本内容...</p>',
    };
  },
  mounted() {
    const content = document.getElementById('content');
    if (content) {
      content.addEventListener('scroll', () => {
        if (!content.scrollHeight || content.scrollTop === content.scrollHeight) {
          // 当内容完全展示时，移除省略号
          content.querySelector('.ellipsis').textContent = '';
        }
      });
    }
  },
};

当你滚动到超出容器视口的部分，省略号就会消失，显示完整内容。请注意，这只是一个基本示例，实际应用可能需要考虑懒加载、滚动到底部动态加载等内容。