text-overflow: ellipsis 在 上不生效，是因为表格默认 table-layout: auto 且缺乏宽度约束；必须同时设置 table-layout: fixed、table 宽度（如 width: 100%）、col 宽度，并配合 white-space: nowrap、overflow: hidden 才能生效。
为什么 text-overflow: ellipsis 在 <td> 上不生效
<p>直接给 <code><td> 加 <code>white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 通常没反应——不是 CSS 写错了，而是表格默认采用 table-layout: auto，列宽由内容撑开，text-overflow 失去作用前提（必须有明确宽度约束）。更隐蔽的是：即使你给 <td> 设了 <code>width，若父级 <table> 没设宽度或没切到固定布局，浏览器仍会忽略该宽度。
<h3>必须同时设置 <code>table-layout: fixed 和 <table> 宽度
<p>这是最常漏掉的两步。仅加 <code>table-layout: fixed 不够，<table> 还得有明确宽度（如 <code>width: 100% 或具体像素值），否则列宽分配无依据，单元格依然“自由伸缩”。
-
table { table-layout: fixed; width: 100%; } —— 必须成对出现
-
col 标签或 col { width: 150px; } 比在 <td> 上写 <code>width 更可靠，优先用它定义列宽
- 避免在
<td> 上用 <code>min-width 或 flex，会破坏表格流
单行省略 vs 多行换行：选错场景会导致布局断裂
单行省略（ellipsis）适合表头、ID、状态码等短标识；但遇到长 URL、中文无空格串、JSON 片段时，white-space: nowrap 会让整行横向溢出，反而更糟。
- 要保留可读性且允许折行：用
word-break: break-word + overflow: hidden + max-width
- 要严格控高+多行截断：加
display: -webkit-box + -webkit-line-clamp: 2，但注意这不适用于 <td> 默认 display（需显式设 <code>display: block，可能影响表格对齐）
- 慎用
word-break: break-all —— 它会在任意字符间断，中文里可能把“用户”切成“用|户”，仅限可信、结构化数据（如 base64）
移动端和响应式下容易被忽略的细节
小屏设备上，字体相对容器变大，原本 OK 的 max-width: 200px 可能瞬间失效。单纯加媒体查询调小字体，不如从容器层加固：
立即学习“前端免费学习笔记（深入）”；
- 给
<td> 加 <code>max-width: 100vw 防超屏
- 用
padding-inline: clamp(4px, 1em, 8px) 替代固定 padding，缓冲文字挤压
- 对含 URL 的列，额外加
overflow-wrap: anywhere（比 break-word 兼容性更好，现代浏览器支持）
真正卡住人的从来不是某一行 CSS，而是 table-layout: fixed、<table> 宽度、<code><col> 宽度、<td> 白空间行为这四者没对齐。调一个，往往得同步动另外三个。</td>
table { table-layout: fixed; width: 100%; } —— 必须成对出现col 标签或 col { width: 150px; } 比在 <td> 上写 <code>width 更可靠，优先用它定义列宽
<td> 上用 <code>min-width 或 flex，会破坏表格流
单行省略 vs 多行换行：选错场景会导致布局断裂
单行省略（ellipsis）适合表头、ID、状态码等短标识；但遇到长 URL、中文无空格串、JSON 片段时，white-space: nowrap 会让整行横向溢出，反而更糟。
- 要保留可读性且允许折行：用
word-break: break-word+overflow: hidden+max-width - 要严格控高+多行截断：加
display: -webkit-box+-webkit-line-clamp: 2，但注意这不适用于<td> 默认 display（需显式设 <code>display: block，可能影响表格对齐） - 慎用
word-break: break-all—— 它会在任意字符间断，中文里可能把“用户”切成“用|户”，仅限可信、结构化数据（如 base64） - 给
<td> 加 <code>max-width: 100vw防超屏 - 用
padding-inline: clamp(4px, 1em, 8px)替代固定 padding，缓冲文字挤压 - 对含 URL 的列，额外加
overflow-wrap: anywhere（比break-word兼容性更好，现代浏览器支持）
移动端和响应式下容易被忽略的细节
小屏设备上，字体相对容器变大，原本 OK 的 max-width: 200px 可能瞬间失效。单纯加媒体查询调小字体，不如从容器层加固：
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是某一行 CSS，而是 table-layout: fixed、<table> 宽度、<code><col> 宽度、<td> 白空间行为这四者没对齐。调一个，往往得同步动另外三个。</td>
