td文字溢出需同时设置white-space: nowrap、overflow: hidden、text-overflow: ellipsis及width或max-width，且table需设table-layout: fixed才能生效。
td 里文字溢出不隐藏？先确认 white-space 是否被重置
默认情况下 <td> 并不会自动隐藏溢出内容，即使设置了 <code>overflow: hidden，也常因 white-space 的默认值 normal 导致换行撑高单元格，而非截断。真正起作用的是组合：强制不换行 + 隐藏溢出。
常见错误是只加 overflow: hidden 或只设 text-overflow: ellipsis，但漏掉 white-space: nowrap 和 width（或 max-width）约束。
-
white-space: normal（默认）→ 允许换行，溢出不可见但高度自适应，text-overflow失效 -
white-space: nowrap→ 强制单行，配合overflow: hidden才能触发截断 -
white-space: pre-wrap或pre-line→ 保留部分空白符行为，但不满足“隐藏溢出”目标，慎用
要显示省略号（…），必须满足三个条件
仅靠 white-space: nowrap 只能强制单行并隐藏超出部分（变成裁剪），要看到 ... 还需另外两个 CSS 属性同时存在：
-
overflow: hidden（父容器必须有明确宽度限制，否则不限宽就无“溢出”可言） -
text-overflow: ellipsis（仅对单行生效；多行省略需用display: -webkit-box等 hack，不适用于<td> 原生场景） <li> <code>width或max-width（写在<td> 上，或通过 <code><col>/table-layout: fixed控制列宽）示例（直接作用于单元格）：
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;"> 这是一段非常长的文本，超出部分应该显示省略号 </td>
table-layout: fixed 是稳定列宽的关键
如果表格没设
table-layout: fixed，浏览器按内容自动计算列宽，此时给<td> 设 <code>max-width很可能无效——因为整列会被最长单元格撑开。想让max-width生效，得从表格层面锁定列宽逻辑。- 加
style="table-layout: fixed; width: 100%;"到<table> 标签 <li>配合 <code><col>设置列宽（如<col style="width: 120px">），比在每个<td> 上重复写更可靠 <li>若用百分比列宽，确保父容器有明确宽度，否则 <code>table-layout: fixed下各列会均分，可能不符合预期 - 图片或
<span></span>内嵌了display: inline-block→ 它们不受white-space: nowrap控制，需单独设max-width: 100%; height: auto; overflow: hidden; - 单元格内用了
display: flex→white-space失效，应改用flex-shrink: 1+min-width: 0让子项可压缩，再配合overflow: hidden - 含
<br>或换行符的文本 →white-space: nowrap会把换行符当空格处理，可能造成意外空隙；建议预处理或用white-space: nowrap; word-break: keep-all;
内联元素、图片、flex 子项在 td 中的表现差异
<td> 默认是表格单元格，其内部块级/内联元素的行为受 <code>white-space影响较小，但以下情况容易踩坑：复杂内容建议统一用 wrapper 元素包裹，并将截断样式施加在 wrapper 上，而不是直接写在
<td> 上。 <p>最易被忽略的一点：所有这些样式都依赖于 <code><td> 有确定的宽度上下文。没有宽度约束的表格单元格，再完整的 CSS 组合也白搭。</td> - 加
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
