本文介绍一种无需 JavaScript 的纯 HTML + CSS 方案，利用 和 标签实现平滑动画的“显示更多/显示更少”交互，并支持自定义字体图标与过渡效果。
本文介绍一种无需 javascript 的纯 html + css 方案，利用 `` 和 `` 标签实现平滑动画的“显示更多/显示更少”交互，并支持自定义字体图标与过渡效果。
在现代前端开发中，为长文本添加“展开/收起”功能是提升可读性与用户体验的常见需求。传统方案常依赖 JavaScript 监听点击、切换 class、操作 DOM —— 但其实，HTML5 原生的 元素已为此场景提供了语义化、无障碍（a11y）、零 JS 的优雅解法。
是一个可折叠的交互式控件，默认收起其内部内容（除 外），点击
即可展开或收起。它天然支持键盘操作（Enter/Space）和屏幕阅读器，无需额外 ARIA 属性，符合 Web 标准最佳实践。
以下是一个完整、可直接运行的示例，已适配您提供的法语文本及排版需求：
<style>
/* 基础样式：隐藏默认箭头，自定义图标 */
details > summary {
list-style: none;
font-family: "Cormorant Garamond", sans-serif;
font-style: italic;
font-weight: 400;
font-size: 33px;
line-height: 42px;
width: 80%;
margin-left: 10%;
cursor: pointer;
position: relative;
padding-right: 30px;
}
/* 使用 Font Awesome 图标（需引入 CDN） */
details > summary::after {
content: "▼";
position: absolute;
right: 0;
font-size: 18px;
transition: transform 0.3s ease;
}
details[open] > summary::after {
content: "▲";
transform: rotate(180deg);
}
/* 展开内容区域样式 */
details > p {
margin: 0;
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: 16px;
animation: expand 0.4s ease-out forwards;
}
@keyframes expand {
from {
opacity: 0;
transform: scaleY(0);
transform-origin: top;
}
to {
opacity: 1;
transform: scaleY(1);
}
}
/* 可选：禁用默认 focus outline（如需保持视觉简洁） */
details > summary:focus {
outline: none;
}
</style>
<details>
<summary>Bonjour je suis Olfa…</summary>
<p>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 afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques. Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement. 2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon diplôme d’esthéticienne que j’obtiens. Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire. Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9972" title="Wechat Article Html"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="Wechat Article Html" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9972" title="Wechat Article Html">Wechat Article Html</a>
<p>将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。</p>
</div>
<a href="/xiazai/skill9972" title="Wechat Article Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</details>✅ 关键优势说明：
- 零 JavaScript：完全基于语义化 HTML，降低维护成本与潜在错误；
- 开箱即用的可访问性：自动支持 aria-expanded、键盘导航与屏幕阅读器播报；
- CSS 动画可控：通过 transform: scaleY() + opacity 实现轻量高性能动画（GPU 加速），避免重排（reflow）；
- 图标灵活定制：使用 ::after 伪元素配合 Unicode 或 Font Awesome，轻松替换为 ▼/▲、+/- 或 SVG；
- 响应式友好：所有尺寸均采用相对单位（px/%），可无缝集成至现有 CSS 架构。
⚠️ 注意事项：
- 在 IE 中完全不支持，如需兼容 IE，请改用 JS 方案（推荐 classList.toggle() + max-height 过渡）；
- Safari 对 的 animation 支持良好，但旧版可能忽略 transform-origin，建议始终显式声明；
- 若文本含内联样式（如 、），确保其继承父级字体设置，避免样式断裂；
- summary 内容应简洁明确（如本例中的首句缩略），避免冗长影响初始视觉焦点。
总结： 不仅是“够用”的快捷方案，更是语义正确、性能优异、面向未来的现代 Web 实践。对于展示型文案（如服务介绍、个人简介、产品描述），它应成为你的首选工具——简洁、可靠、且自带优雅。
