details内换行被转为空格是html解析默认行为；summary需设white-space:normal等防溢出；段落间距失控源于样式泄漏；safari点击失效因结构/样式不规范。
details 内部文字换行被当成空格处理
HTML 解析时，details 标签内换行符（回车、缩进空格）会被转成一个普通空格字符。如果 summary 或折叠内容里写了多行 HTML，比如：
<details><summary>用户协议</summary><p>本协议自2026年8月1日起生效，
适用于所有注册用户。</p>
</details>
渲染后，“生效，”和“适用于”之间会多一个空格，视觉上像错位或断句异常。这不是 CSS 问题，是 HTML 文本节点的默认行为。
- 用
<span></span>或<strong></strong>包裹每段语义文本，避免纯文本跨行书写 - 把整段内容写在一行里（可读性略降，但最稳）：
<p>本协议自2026年8月1日起生效，适用于所有注册用户。</p> - 若必须保留源码换行，用
white-space: pre-line控制容器，但仅限内容区，别加在summary上——否则点击热区变窄
summary 中文长文本折行失败导致溢出
summary 默认是 display: list-item，且内部文本不自动换行。当标题过长（尤其无空格的中文/URL），它会撑开父容器或横向溢出，而不是折行。
- 给
summary显式设white-space: normal和word-break: break-word - 补一句
max-width: 100%，防止它突破details宽度 - 别依赖
text-overflow: ellipsis——summary不支持单行省略，加了也没用 - 如果用了自定义
::before箭头图标，确保margin-right足够，否则文字挤到图标后面
折叠内容里的
段落间距失控
很多人发现收起再展开后，<p></p> 之间的空白变大、文字贴边或上下错位。这通常不是 details 的锅，而是全局或父级样式泄漏进来，比如：
-
line-height过高（如设了line-height: 2）会让段落行距膨胀，看起来像“撑开” -
margin-top/bottom折叠：相邻<p></p>的垂直 margin 会合并，导致间距不等于预期值 - 父容器没设
box-sizing: border-box，padding 加 margin 让内容区实际宽度变小，加剧换行 - 解决方案：对
details > * :is(p, div, ul)单独重置margin和line-height，别靠继承
移动端 Safari 下 summary 点击失效的隐藏原因
iOS Safari ≤15.4 对 summary 的点击区域非常敏感，任何 DOM 结构或样式偏差都会让它“点不动”。最常踩的坑是：
-
summary前有注释、空格或换行 —— 必须是details的第一个子元素（element node），连一个都不行 - 给
summary设了display: inline-block或float—— 热区缩小，触屏几乎点不中 - 用 JS 改
style.display控制显隐 —— 绕过了open属性，toggle事件不触发，Safari 直接放弃响应 - 修复动作必须三件套齐备：
summary { list-style: none; }+summary::before插图标 +details[open] > summary::before { transform: rotate(90deg); }
细节标签本身不管理内容生命周期，文字换行只是表象，真正要盯住的是 DOM 结构洁癖、CSS 作用域隔离和移动端点击热区完整性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
