details标签不支持首行缩进与折叠联动，需分离处理：用text-indent作用于内容段落（如p标签），用details/summary控制显隐；缩进样式在展开后生效，折叠时因display:none自然不渲染。
details标签本身不支持首行缩进折叠
直接用 <details></details> 无法实现“段落首行缩进 + 点击折叠”的组合效果——它只控制整个内容块的显隐，不干预内部排版。所谓“首行缩进折叠”，本质是两个独立需求：视觉上首行缩进（CSS 控制），交互上按需收起（<details></details> 控制）。必须分开处理，不能指望一个标签自动联动。
正确做法：details + summary + CSS text-indent
把缩进逻辑交给 text-indent，折叠逻辑交给 <details></details> 结构。关键点在于：缩进要加在 <p></p> 或内容容器上，而不是 <summary></summary>；<summary></summary> 只负责触发，内容体另起一行包裹段落。
常见错误是把 text-indent 加在 <details></details> 或 <summary></summary> 上，结果缩进失效或错位。正确结构示例：
<details><summary>点击展开说明</summary><p style="text-indent: 2em;">这是一段文字，首行会缩进两字符，其余行正常对齐。折叠时整段隐藏，展开时恢复缩进样式。</p> </details>
折叠后缩进消失？检查是否误用了 display: none
<details></details> 默认折叠时子内容被设为 display: none，此时 text-indent 不生效（因为元素未渲染）。这不是 bug，是预期行为。只要确保缩进样式写在内容元素（如 <p></p>）上，展开后自然生效；不需要额外 hack。
- 不要用 JavaScript 强制修改
display来“保留缩进”——破坏原生语义和可访问性 - 若需自定义折叠动画，用
max-height+overflow: hidden替代，但要注意text-indent在动画中始终有效 - 移动端 Safari 对
<details></details>的open属性响应有轻微延迟，缩进样式不会受影响，但首次点击可能视觉滞后
兼容性与可访问性提醒
<details></details> 在现代浏览器中支持良好（Chrome 12+、Firefox 49+、Safari 6.2+），但 IE 完全不支持。如果必须兼容旧环境，得降级为手写 aria-expanded + JS 切换 hidden 属性，此时 text-indent 仍照常作用于段落。
真正容易被忽略的是键盘操作：原生 <details></details> 支持空格/回车切换，且 <summary></summary> 自动获得焦点；如果手动实现，必须补全 tabindex、role="button" 和键盘事件监听，否则屏幕阅读器用户无法感知或操作折叠状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
