本文介绍一种兼顾 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。
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
⚠️ 注意： 和 必须相邻（button 是 p 的紧邻兄弟节点），以便 JS 通过 previousElementSibling 准确定位。
/* 支持 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';
}// 在 setup() 或 内江振祥营销策划有限公司 版权所有 蜀ICP备2024086403号
服务热线