Vue中v-html含CSS样式时如何限制显示160字符？

解决思路 #

核心是先从HTML字符串中提取纯文本内容，按长度截取后，再将截取后的文本放回原HTML结构中保留样式，同时添加展开/收起的状态控制。

实现代码 #

组件脚本部分 #

export default {
  data() {
    return {
      posts: [], // 你的帖子数据源
      expandedPosts: {} // 记录每个帖子的展开状态，键为帖子ID
    };
  },
  methods: {
    // 处理带HTML的文本截取
    truncateStyledText(htmlContent, maxChars) {
      // 用DOMParser解析HTML（内存中处理，不影响真实DOM）
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlContent, 'text/html');
      // 提取纯文本内容
      const plainText = doc.body.textContent.trim();

      // 如果文本长度未超过限制，直接返回原HTML
      if (plainText.length <= maxChars) {
        return htmlContent;
      }

      // 截取指定长度的纯文本并添加省略号
      const truncatedText = plainText.substring(0, maxChars) + '...';
      // 将截取后的文本替换回HTML结构
      doc.body.textContent = truncatedText;
      // 返回处理后的带样式HTML
      return doc.body.innerHTML;
    },
    // 切换展开/收起状态
    togglePostExpand(postId) {
      this.expandedPosts = {
        ...this.expandedPosts,
        [postId]: !this.expandedPosts[postId]
      };
    }
  }
};

模板部分 #

<div class="col-12 col-lg-4" v-for="item in posts" :key="item.id">
  <!-- 根据展开状态显示完整内容或截取后的内容 -->
  <p v-html="expandedPosts[item.id] ? item.body : truncateStyledText(item.body, 160)"></p>
  <!-- 切换按钮 -->
  <button 
    @click="togglePostExpand(item.id)" 
    class="text-decoration-none text-primary border-0 bg-transparent"
  >
    {{ expandedPosts[item.id] ? '收起' : '查看更多' }}
  </button>
</div>

关键说明 #

• DOMParser的优势：在内存中解析HTML，不会创建真实DOM元素，避免污染页面，同时能准确提取纯文本。
• 样式保留：处理后的HTML会保留原有的p、span标签及CSS样式，仅替换文本内容。
• XSS风险提示：确保item.body的数据源是可信的，避免注入恶意代码（v-html会直接渲染HTML内容）。

内容的提问来源于stack exchange，提问作者Nishant sethi