text-overflow: ellipsis 在 中无效，因 table 默认布局不触发溢出；需 table-layout: fixed、max-width、内层 div 及四条 CSS 规则配合，无空格字符串还需 overflow-wrap: break-word。
直接在 <td> 上写 <code>text-overflow: ellipsis 基本无效——不是你 CSS 写错了，而是表格默认布局机制根本没让溢出发生。
为什么 text-overflow: ellipsis 在 <td> 里不生效
<p>表格单元格默认是 <code>display: table-cell，它会无视 width 或 max-width，优先按内容撑开整列宽度。结果就是：容器“没真溢出”，overflow: hidden 形同虚设，text-overflow: ellipsis 根本不会触发。
-
table-layout: auto（默认）下，列宽由该列最长内容决定，max-width 被忽略
<td> 不支持 <code>overflow 属性，必须套一层块级元素（如 <div>）才能起效
<li>即使写了全部四条规则（<code>white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width），漏掉 table-layout: fixed 就白搭超长路径字符串（如 /api/v1/users/1234567890）必须用 word-break: break-all 或 overflow-wrap: break-word
这类无空格字符串（URL、路径、哈希 ID）无法靠 white-space: nowrap + ellipsis 截断——它们根本不换行，也不折断，只会强行拉宽列。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
- 优先用
overflow-wrap: break-word：在单词内断行，语义更友好（比如 /api/v1/users/ 可能在 / 后断开）
-
word-break: break-all 强制任意位置断行，适合纯技术字符串，但可能割裂语义（如把 users123 断成 users1 和 23）
- 不能只依赖
text-overflow，它对无空格串完全没用；break-word 才是解决路径溢出的第一选择
真正能显示省略号的路径处理方案
如果业务强要求单行省略号（比如日志路径只显示前缀 + ...），必须满足四个硬性条件，且顺序无关但缺一不可：
立即学习“前端免费学习笔记（深入）”；
<table> 上设 <code>table-layout: fixed + 明确宽度（如 width: 100%）
<td> 设 <code>max-width: 200px（推荐，比 width 更适应响应式）
<td> 内部包裹 <code><div>，并对其设置：<code>display: block、white-space: nowrap、overflow: hidden、text-overflow: ellipsis
- 若
<table> 外层是 Flex 容器，还需给 <code><td> 加 <code>min-width: 0，否则 Flex 默认的 min-width: auto 会绕过截断
移动端或 Outlook 邮件模板里别碰 table-layout: fixed
Outlook 桌面版不支持 table-layout: fixed，iOS Safari 对 text-overflow 渲染也有像素级偏差。这时候稳妥做法是放弃省略号，改用：
-
white-space: normal + word-break: break-all + 百分比列宽
- 小屏下用
overflow-x: auto 包裹整个 <table>，允许水平滚动
<li>路径字段加 <code>title 属性，鼠标悬停显示全文（<td title="/api/v1/logs?token=abc123">...</td>）
最易被忽略的是：table-layout: fixed 必须写在 <table> 元素上，而不是 <code><td> 或 <code><tr>；很多人调了半天发现样式全对，就差这一行声明。</tr>
table-layout: auto（默认）下，列宽由该列最长内容决定，max-width 被忽略<td> 不支持 <code>overflow 属性，必须套一层块级元素（如 <div>）才能起效
<li>即使写了全部四条规则（<code>white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width），漏掉 table-layout: fixed 就白搭超长路径字符串（如 /api/v1/users/1234567890）必须用 word-break: break-all 或 overflow-wrap: break-word
这类无空格字符串（URL、路径、哈希 ID）无法靠 white-space: nowrap + ellipsis 截断——它们根本不换行，也不折断，只会强行拉宽列。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 优先用
overflow-wrap: break-word：在单词内断行，语义更友好（比如/api/v1/users/可能在/后断开） -
word-break: break-all强制任意位置断行，适合纯技术字符串，但可能割裂语义（如把users123断成users1和23） - 不能只依赖
text-overflow，它对无空格串完全没用；break-word才是解决路径溢出的第一选择
真正能显示省略号的路径处理方案
如果业务强要求单行省略号（比如日志路径只显示前缀 + ...），必须满足四个硬性条件，且顺序无关但缺一不可：
立即学习“前端免费学习笔记（深入）”；
<table> 上设 <code>table-layout: fixed+ 明确宽度（如width: 100%）<td> 设 <code>max-width: 200px（推荐，比width更适应响应式）<td> 内部包裹 <code><div>，并对其设置：<code>display: block、white-space: nowrap、overflow: hidden、text-overflow: ellipsis- 若
<table> 外层是 Flex 容器，还需给 <code><td> 加 <code>min-width: 0，否则 Flex 默认的min-width: auto会绕过截断移动端或 Outlook 邮件模板里别碰
table-layout: fixedOutlook 桌面版不支持
table-layout: fixed，iOS Safari 对text-overflow渲染也有像素级偏差。这时候稳妥做法是放弃省略号，改用：-
white-space: normal+word-break: break-all+ 百分比列宽 - 小屏下用
overflow-x: auto包裹整个<table>，允许水平滚动 <li>路径字段加 <code>title属性，鼠标悬停显示全文（<td title="/api/v1/logs?token=abc123">...</td>）
最易被忽略的是：
table-layout: fixed必须写在<table> 元素上，而不是 <code><td> 或 <code><tr>；很多人调了半天发现样式全对，就差这一行声明。</tr> -
