details标签需重置默认样式以保障中文阅读节奏：summary须设为块级并统一排版，展开内容必须用包裹，text-indent、line-height等关键属性须显式声明，禁用max-height动画，lang属性需精准标注中英文混排。

details标签默认样式破坏中文段落节奏

本身不带语义化段落行为，summary是行内级元素，点击后展开的子内容若直接塞

，浏览器会按默认 margin 渲染，导致首行无缩进、行高塌陷、段间距突兀。中文阅读依赖稳定的视觉节奏，而details内部若没重置，会出现“文字贴着左边缘挤在一起”或“两段之间空得像断层”的现象。

• summary里别写长句，它本质是触发器，不是正文容器；超 20 字就该拆到展开区
• 展开内容必须用

  包裹，不能裸文本或

  ——否则 screen reader 无法识别段落边界
• 默认summary字体粗细、字号、上下 padding 不一致，iOS Safari 和 Chrome 对summary::marker支持差异大，容易让「▶」符号和文字 baseline 错位

text-indent + line-height 必须显式重写

不继承父级段落排版规则，所有中文阅读关键参数得手动设，否则缩放、深色模式、系统字体变更时全崩。

• 每个展开后的

  都要加text-indent: 2em;，禁用px单位，否则缩放后缩进失效

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
• line-height: 1.6;必须写在

  上，不能只靠全局 body 设置——details内部计算会跳过继承链

• 若summary含中文标点（如「说明：」），建议用span包住标点并设font-family: "PingFang SC", "Hiragino Sans GB";，避免 fallback 字体把冒号撑宽

折叠/展开动画影响可读性，别用 transform 或 opacity 原生details不支持 CSS 过渡，强行加max-height动画会导致行高错乱、文字被裁切，尤其在中文字数多、行高为1.6时更明显。

• 禁用transition: max-height .3s;——中文段落高度难预估，max-height: 0 → 500px必然闪动或留白
• 真需要动画，改用height: auto配合overflow: hidden和 JS 控制 class 切换，但优先接受原生无动画体验
• 移动端双击缩放后，details内部文字若用了font-size: 100%，可能缩成 12px，务必统一用16px

无障碍与多语言混排容易漏掉 lang 属性details常用于 FAQ、帮助文档，内容常含中英术语、代码片段、URL，但lang若只设在html>上，屏幕阅读器对展开区英文单词仍按中文规则朗读，且折行逻辑错误。

• 在每个details上加lang="zh"，若内部有英文段落，再嵌套<p lang="en">...</p>
• 英文段落需同步加overflow-wrap: break-word; word-break: keep-all;，否则长 URL 或类名（如useEffect）会横向溢出
• 避免在summary里放code块——summary不支持块级子元素，Chrome 会静默忽略，Firefox 可能报错

细节最麻烦的地方不在展开逻辑，而在「折叠状态下，summary 的视觉重量是否和正文段落协调」。很多人调完展开区就忘了 summary 本身也是中文文本节点：它的字重、字距、行高、甚至是否启用 font-smoothing，都会影响用户第一眼判断要不要点开。这一步没对齐，后面所有排版都白调。