本文介绍如何使用原生 HTML 和 标签，配合 css 动画，零 JavaScript 实现优雅的“显示更多/显示更少”交互效果，支持平滑缩放展开、图标自动切换与语义化无障碍访问。
本文介绍如何使用原生 html `
` 和 `
` 标签，配合 css 动画，零 javascript 实现优雅的“显示更多/显示更少”交互效果，支持平滑缩放展开、图标自动切换与语义化无障碍访问。
在现代前端开发中，为长文本添加“展开/收起”功能既提升页面可读性，又优化首屏加载体验。值得注意的是，无需一行 JavaScript，即可借助浏览器原生支持的
元素实现完整交互逻辑——它天然具备开合状态管理、键盘可访问性（Enter/Space 触发）及屏幕阅读器兼容性。
以下是一个简洁、专业且可直接复用的实现方案：
✅ 核心结构：语义化 HTML
<details class="text-toggle"> <summary class="toggle-summary"> <span class="summary-text">显示更多</span> <svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"> <path d="M6 9l6 6 6-6" /> </svg> </summary> <p class="qodef-m-text"> Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants. En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs... <!-- 此处为完整长文本 --> </p> </details>? 提示：
默认闭合；添加 open 属性可默认展开（如）。内容即为始终可见的触发区域，支持任意内联元素（文字、图标、SVG）。
? 增强体验：CSS 动画与样式定制
为实现流畅的展开动画，我们对
内部的
应用 CSS transform + opacity 过渡（注意：height: 0 / max-height 方案存在动画不可控问题，故推荐 scaleY 缩放方案）：
立即学习“前端免费学习笔记（深入）”；
.text-toggle { margin: 1.5rem 0; } .toggle-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: #333; transition: color 0.2s; } .toggle-summary:hover { color: #007bff; } .toggle-icon { transition: transform 0.3s ease; flex-shrink: 0; } /* 展开时图标旋转 */ .text-toggle[open] .toggle-icon { transform: rotate(180deg); } /* 文本展开动画 */ .text-toggle > p { margin: 1.25rem 0 0; font-family: "Cormorant Garamond", sans-serif; font-style: italic; font-weight: 400; font-size: 33px; line-height: 42px; width: 80%; margin-left: 10%; opacity: 0; transform: scaleY(0); transform-origin: top; animation: slideIn 0.4s forwards ease-out; } @keyframes slideIn { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } /* 收起时反向动画（需 js 触发）→ 但原生 details 不支持收起动画，因此我们仅对展开做动画，收起保持快速隐藏（更符合 UX 直觉） */ .text-toggle:not([open]) > p { animation: none; display: none; }⚠️ 注意事项与最佳实践
- 无障碍优先：
/是 WAI-ARIA 推荐的语义化方案，自动暴露 aria-expanded 状态，无需额外 ARIA 标注。
- 图标建议：使用 SVG 替代 Font Awesome 图标，避免字体加载延迟或跨域问题；也可通过伪元素 ::after 动态插入箭头（如 content: “▼”;），再配合 transform: rotate() 控制方向。
- 响应式适配：若文本在移动端需更紧凑，默认字号与行高建议用 rem 或 clamp() 动态调整。
- seo 友好：所有内容保留在 dom 中（非动态加载），搜索引擎可正常索引全文。
- 兼容性：支持所有现代浏览器（chrome 12+、firefox 49+、safari 6+、edge 79+），IE 不支持，如需兼容 IE，请回退至 JS 方案。
✅ 总结
该方案以最小技术成本达成高性能、高可访问性与视觉一致性：“展开”有细腻缩放入场动画，“收起”保持即时响应，全程无 JS 依赖，代码精简、维护成本低。对于内容型网站（如个人简介、服务说明、FAQ），是兼顾用户体验与开发效率的理想选择。只需将你的 .qodef-m-text 内容包裹进
结构，并引入上述 CSS，即可一键启用。