text-overflow: ellipsis必须配合white-space: nowrap、overflow: hidden和明确width/max-width三者才生效；多行截断需用-webkit-line-clamp且仅限webkit内核，firefox需js fallback。
单行文本截断必须配齐三个 CSS 属性
只写 text-overflow: ellipsis 是没用的，它只对单行生效，且依赖另外两个前提条件。常见错误是漏掉 white-space: nowrap 或忘了设 overflow: hidden。
标准组合如下：
-
white-space: nowrap：强制不换行，让文字横向延伸 -
overflow: hidden：隐藏超出容器的部分 -
text-overflow: ellipsis：在被隐藏的末尾显示省略号
三者缺一不可。如果父容器是 flex 且子项未设 min-width: 0，即使写了这三条，也可能因 flex 项目的默认最小尺寸导致截断失效。
多行文本截断只能靠 -webkit-line-clamp
纯 CSS 实现两行或三行截断，目前最可靠的是 WebKit 系列方案，但有硬性约束：
- 必须同时声明：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2（数字按需改） - 父容器需有明确宽度（如
width或max-width），否则在 flex 容器中可能不触发 - 建议显式设置
height或max-height，尤其在 iOS 某些版本中，否则截断可能不生效 -
text-overflow: ellipsis在这里只是“配合项”，真正起作用的是-webkit-line-clamp
Firefox 完全不支持该方案，也没有对应的标准属性，强行使用只会让文字溢出或撑高容器。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
Firefox 和全浏览器兼容必须用 JS fallback
当需要在 Firefox 或旧版 Edge 中也显示省略号时，CSS 方案直接失效，只能上 JS。关键不是简单截字符串，而是判断是否真实溢出：
- 用
element.scrollHeight > element.clientHeight判断是否内容超出了可视区域 - 逐词裁剪比逐字符更安全，避免在单词中间截断
- 若原文含句号（
.）、问号等，优先截到最近的标点后，提升可读性 - 注意 HTML 字符串中存在标签时，不能直接操作 innerHTML 截取——会破坏结构，得先解析 DOM 再处理文本节点
例如用 JSDOM 解析后再遍历文本节点裁剪，或用临时 div + innerHTML 自动修复再校验长度，都是为保标签闭合。
HTML 字符串里截文本，别碰原始字符串切片
直接对带标签的 HTML 字符串做 str.substring(0, 160) 是危险的——可能把 <div> 截成 <code><di>，导致后续渲染错乱或 XSS 风险。
<p>安全做法是借浏览器解析能力：</p>
<ul>
<li>创建临时 <code>div，把前 N 字符赋给 innerHTML
div.innerHTML.length 是否超过阈值：若超出，说明浏览器自动补了未闭合标签（比如加了 
