要实现<details>中中文summary两端对齐，须给<summary>设display: block、text-align: justify、text-justify: inter-character且lang="zh"，并用::after伪元素兜底；混排与移动端需谨慎处理断行和兼容性。
details标签默认不继承text-align，必须显式设置
直接给<details>加text-align: justify基本无效——它是个替换元素（replaced element-like），内部文本由浏览器内置的 summary 渲染逻辑控制，不自动继承父级对齐样式。你得把样式落到具体文本容器上。
最可靠做法是：给<summary>设display: block（解除其默认 inline 行为），再加text-align: justify。否则浏览器可能忽略对齐声明，尤其在 Safari 中。
-
<details>本身只控制展开/折叠状态，不参与文本排版计算 -
<summary>默认是 inline 元素，text-align对其子文本生效但受行框限制，常表现为“没反应” - 必须确保
<summary>有明确宽度上下文（比如父<details>设了width或max-width），“两端”才有参照
中文summary两端对齐要加text-justify: inter-character
哪怕<summary>已设display: block和text-align: justify，纯中文标题仍大概率左对齐——因为浏览器默认不在汉字间插入可伸缩间距。
现代 Chromium（Chrome 120+ / Edge 120+）和 Firefox 110+ 支持text-justify: inter-character，它强制按字断点拉伸。但有两个硬条件：
立即学习“前端免费学习笔记（深入）”；
-
lang="zh"必须写在<summary>或其最近块级祖先上，否则 Safari 可能静默失效 - 必须和
text-align: justify同时出现，缺一不可 - 旧版 Safari（iOS 16 及更早）完全忽略该属性，此时会退回到左对齐
正确写法示例：
<details><br> <summary lang="zh" style="display: block; text-align: justify; text-justify: inter-character;">这是一个需要两端对齐的中文标题</summary><br></details>
最后一行不撑满？用::after伪元素兜底
text-align-last: justify对<summary>基本不可靠：它依赖真实换行，而 summary 内容通常很短，浏览器常判定为单行，导致该属性被跳过；Safari 15.4 之前也不支持。
更稳的解法是用::after伪造一行，让原内容变成“倒数第二行”，从而被text-align: justify正常处理：
- 给
<summary>加position: relative - 添加
summary::after { content: ""; display: block; width: 100%; } - 这样浏览器会把原文字当“非末行”，施加两端对齐；空块占位但不可见
- 注意：该方案会让 summary 高度微增（一个空行高度），若容器高度受限需调
line-height或margin-bottom
混排、短文本和移动端要特别小心
中英文混排时，英文单词若过长（如 URL 或技术术语），会顶破行宽导致 justify 失效；中文连续无标点（如“人工智能机器学习大数据”）也会让浏览器找不到合理断点。
小屏设备上字距拉伸更敏感，稍大一点的letter-spacing降级方案就容易让顿号、句号后露出明显空隙。真正需要兼容旧环境时，宁可放弃两端对齐，改用text-align: left + padding-right模拟视觉平衡。
别在<details>上盲目套 flex 或 grid 布局——它会干扰 summary 的默认渲染流，有时反而让对齐更难控制。优先用纯 CSS 块级流方案。
