details标签内换行符被忽略是因white-space默认合并空白符，需在内容元素上设white-space: pre-line；summary换行失效多因浏览器ua样式覆盖，须用!important强制重写。
details标签里换行符被忽略，是因为white-space默认值
浏览器对<details></details>内部文本的处理和普通<p></p>一样：连续空白符（包括\n）会被合并成单个空格。如果你从后端取到带\n的描述文本，直接塞进<summary></summary>或<details></details>正文里，换行就消失了。
这不是<details></details>特有的 bug，而是 HTML 空白符渲染规则在起作用。关键不是“标签不支持换行”，而是它没显式告诉浏览器“请保留换行”。
给details内容加white-space: pre-line最稳妥
在包裹文本的元素上设white-space: pre-line，能保留\n、合并多余空格、允许自动折行——兼顾语义和可读性。
- 别只给
<summary></summary>加，正文内容（比如<p></p>或<div>）也要单独加 <li>避免用<code>pre-wrap：它会把缩进空格也原样保留，容易导致首行缩进异常 - 如果内容来自用户输入且含恶意 HTML，别用
innerHTML替换\n为<br>，有 XSS 风险
示例：
<details><summary>点击展开说明</summary><p class="details-content">第一段内容\n第二段内容</p>
</details><style>
.details-content {
white-space: pre-line;
}
</style>
summary里文字过长不换行？检查button的UA样式干扰
<summary></summary>本质是<button></button>的变体，浏览器会给它套一层 UA 样式，其中常含white-space: nowrap或类似限制。所以即使你在<summary></summary>上写了white-space: normal，也可能被覆盖。
- 必须用
!important或更高优先级选择器强制覆盖，例如：details > summary { white-space: normal !important; } - 超长无空格字符串（如 base64 片段）还需补
overflow-wrap: break-word - 若
<summary></summary>在 Flex 容器中，记得给它加min-width: 0，否则不收缩也不换行
用
手动换行时，注意textContent和innerHTML的区别
如果确定要手写<br>，千万别用textContent赋值——它会把<br>当纯文本显示出来。必须用innerHTML，但前提是内容可信。
- 安全做法：先用
textContent插入原始文本，再用 JS 找到对应节点，遍历文本节点并把\n替换成<br>元素 - 更轻量：用
innerText+white-space: pre-line组合，绕过 HTML 解析风险 - 别在
<summary></summary>里放<br>：部分浏览器不支持，且语义混乱
真正容易被忽略的是：summary 的换行问题往往不是 CSS 没写对，而是被浏览器内置 button 样式静默覆盖了；而 details 正文里的换行失效，90% 是因为忘了给具体容器元素（不是<details></details>本身）设white-space。
