本文介绍如何使用原生 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婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

? 增强体验：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，即可一键启用。