本文介绍一种无需 JavaScript、仅用原生 和 标签配合 CSS 动画，实现平滑展开/收起长文本的现代方案，支持自定义图标、过渡效果与响应式适配。
本文介绍一种无需 javascript、仅用原生 `` 标签配合 css 动画，实现平滑展开/收起长文本的现代方案，支持自定义图标、过渡效果与响应式适配。
在内容型网站（如个人简介、服务描述或博客摘要）中，为提升可读性与页面加载性能，常需对大段文字做“折叠展示”处理——默认仅显示前几行，点击“显示更多”后平滑展开全文，并支持再次点击“收起”。传统做法依赖 jQuery 或复杂 JS 逻辑，但如今完全可通过语义化 HTML5 元素 配合 CSS 动画高效实现，零 JS、高可访问性、天然支持键盘导航与屏幕阅读器。
✅ 核心实现：语义化结构 + 原生交互
为其标题栏（即触发按钮），浏览器默认提供展开状态管理（通过 open 属性控制）。它无需任何 JavaScript 即可工作，且具备良好的无障碍支持（自动关联 aria-expanded 等属性）。
以下是精简可靠的 HTML 结构：
<details class="text-toggle">
<summary class="toggle-trigger">显示更多 <i class="icon-down"></i></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 et je commence une formation en naturopathie...
<!-- 全文内容 -->
</p>
</details>⚠️ 注意：请将原文中独立的
容器移除或嵌套进内，确保 .qodef-m-text 直接作为的子元素，以保障 CSS 选择器生效。立即学习“前端免费学习笔记（深入）”；
? 添加优雅的展开动画（CSS）
默认展开无动画，我们通过 CSS @keyframes 为
添加缩放+淡入效果。关键点在于：仅对 details[open] p 应用动画，避免收起时反向播放（因
收起时会立即移除内容渲染，无法触发 animation-reverse）。因此推荐使用 transform: scaleY() 配合 overflow: hidden 实现更可控的垂直展开：.text-toggle { /* 移除默认箭头，便于自定义图标 */ & summary { list-style: none; cursor: pointer; padding: 8px 12px; font-weight: 600; } & summary::marker { content: ""; } } /* 自定义上下箭头图标（需引入 Font Awesome 或使用 SVG） */ .toggle-trigger .icon-down::before { content: "↓"; margin-left: 6px; transition: transform 0.3s ease; } .text-toggle[open] .toggle-trigger .icon-down::before { content: "↑"; transform: rotate(180deg); } /* 展开动画：仅作用于打开状态下的 p 元素 */ .text-toggle[open] .qodef-m-text { animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; opacity: 1; } @keyframes slideDown { from { opacity: 0; transform: scaleY(0); transform-origin: top; } to { opacity: 1; transform: scaleY(1); } } /* 基础样式继承（保留原有排版） */ .qodef-m-text { font-family: "Cormorant Garamond", sans-serif; font-style: italic; font-weight: 400; font-size: 33px; line-height: 42px; width: 80%; margin-left: 10%; margin-top: 12px; /* 收起状态下隐藏，但保留占位（可选） */ overflow: hidden; }? 进阶优化建议
- 图标替换：若使用 Font Awesome，将 .icon-down::before 替换为：
.icon-down::before { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; } .text-toggle[open] .icon-down::before { content: "\f077"; }- 收起动画支持：严格意义上的收起动画需 JS 监听 toggle 事件并添加临时类（如 is-closing），但多数场景下用户感知差异小，原生方案已足够。
- 移动端适配：为
添加 touch-action: manipulation 提升触摸响应，并确保字体大小在小屏下可读（可用 clamp() 函数）。
- SEO 友好：
内容默认被搜索引擎索引，不影响 SEO；若需默认展开，添加 open 属性即可。✅ 总结
该方案以最小技术成本达成专业级体验：
✔️ 零 JavaScript，降低维护成本与首屏加载压力；
✔️ 语义化 HTML，天然兼容无障碍标准；
✔️ CSS 动画轻量流畅，支持硬件加速；
✔️ 易扩展——可快速复用于多个文本区块，仅需调整类名与文案。只需三步：替换 HTML 结构 → 引入动画 CSS → 微调样式，即可交付一个美观、健壮、符合现代 Web 标准的“显示更多/收起”功能。
