如何在 Nuxt 3 中实现 SEO 友好的“展开/收起”文本折叠功能

本文介绍一种兼顾 googlebot 索引完整性与用户体验的纯前端文本折叠方案：使用 css `line-clamp` 控制行数，通过 js 切换 class 实现“显示更多/更少”，确保搜索引擎可完整抓取原始内容。

在 Nuxt 3 项目中实现“三行截断 + 展开按钮”功能时，关键目标是：对用户友好（视觉上折叠）、对 SEO 友好（HTML 中保留全部文本，不依赖 v-if 或动态渲染隐藏内容）。这意味着不能用 v-show=”false”、v-if=”showAll” 或 display: none 隐藏文字——这些方式可能导致 Googlebot 无法索引被隐藏的内容。

✅ 正确做法是：所有文本始终存在于 DOM 中，仅通过 CSS 视觉截断；点击按钮仅切换 line-clamp 值，不增删节点、不修改 innerHTML。

✅ 推荐实现方案（Nuxt 3 兼容）

1. HTML 结构（服务端渲染友好）

   Lorem ipsum dolor sit amet, consectetur adipiscing elit... 
 

⚠️ 注意： 和 必须相邻（button 是 p 的紧邻兄弟节点），以便 JS 通过 previousElementSibling 准确定位。

2. CSS 样式（支持 WebKit + 回退兼容）

/* 支持 line-clamp 的基础样式 */ [class^="lines-"] {   overflow: hidden;   display: -webkit-box;   -webkit-box-orient: vertical;   /* 关键：启用行数限制 */   -webkit-line-clamp: 3; /* 默认值，可被覆盖 */ }  .lines-1 { -webkit-line-clamp: 1; } .lines-2 { -webkit-line-clamp: 2; } .lines-3 { -webkit-line-clamp: 3; }  /* 展开状态：取消行数限制 */ .lines-all {   -webkit-line-clamp: unset;   /* 可选：重置高度以避免残留溢出 */   max-height: none; }  /* 按钮文字动态切换 */ .show-more {   border: none;   background: none;   padding: 0;   font: inherit;   cursor: pointer;   color: #007bff;   text-decoration: underline; }  .show-more::after {   content: 'Show More'; }  .show-more[data-show-all="true"]::after {   content: 'Show Less'; }

3. JavaScript 行为（建议放在 onMounted 中）

// 在 setup() 或