table-layout: fixed 是表格换行控制的前提，必须配合显式宽度设置；white-space: pre-wrap 与 overflow-wrap: break-word 组合处理含换行符长文本；text-overflow: ellipsis 需块级元素、nowrap 和 hidden 三条件；flex 子项须设 min-width: 0 才能生效。
table-layout: fixed 是表格换行控制的前提
不设 table-layout: fixed，word-wrap: break-word 基本无效。浏览器默认用 table-layout: auto，列宽由内容撑开，导致“想换行却没空间”。设为 fixed 后，列宽由表头或 width 属性决定，内容才真正受控。
必须配合显式宽度设置，比如：table { width: 100%; table-layout: fixed; }，再给 td 设 width: 200px 或百分比。否则即使写了 break-word，列还是随内容伸缩。
- 不要只在
td上写word-wrap就完事，父级table必须先锁定布局 -
table-layout: fixed对响应式有影响：小屏下固定列宽可能造成横向滚动，需配合overflow-x: auto外层容器 - 如果用了
colgroup，它的width会覆盖td的width，优先级更高
white-space: pre-wrap + overflow-wrap: break-word 组合处理带回车的长文本
用户粘贴或提交的含换行符（\n）的文本，比如日志、评论，在 td 里直接显示会塌成一行——因为浏览器默认把 \n 当空格处理。此时单靠 word-wrap: break-word 不管用。
正确解法是：white-space: pre-wrap 保留原始换行 + 允许自动折行，再叠加 overflow-wrap: break-word 处理无空格长串（如 URL、身份证号）。
-
white-space: pre会保留换行但拒绝折行，长行直接溢出；normal会折行但吃掉\n；只有pre-wrap二者兼顾 - 别混用
text-overflow: ellipsis：它要求white-space: nowrap，和pre-wrap冲突，省略号不会出现 - 若
td是 Flex 子项（比如用了display: flex的自定义单元格），记得给它加min-width: 0，否则换行逻辑被阻断
单行截断显示省略号（ellipsis）的硬性条件
text-overflow: ellipsis 看似简单，但漏掉任意一个条件就失效。它只对块级或内联块级元素起作用，且必须同时满足三件事：
- 元素有明确宽度（
width或max-width） white-space: nowrapoverflow: hidden
常见错误：直接给 td 加 text-overflow: ellipsis 不生效，因为 td 默认是表格单元格显示模式，不是块级。得先改成 display: block 或 inline-block，或者套一层 div 并设样式。
示例安全写法：td div.ellipsis { display: block; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Flex 布局下的 td 溢出问题最常被忽略的点
很多项目用 el-table 或自定义 td 时启用了 display: flex（比如居中图标+文字），结果发现 word-wrap 和 ellipsis 都失灵——90% 是因为子元素（如文字容器）没设 min-width: 0。
Flex 子项默认 min-width: auto，会阻止内容收缩，哪怕你写了 flex: 1 或 overflow: hidden，它也不让内部文本换行或截断。
- 修复只需一行：
.text-cell { min-width: 0; }（加在文字所在元素上，不是td或父容器） - 即使用了
flex: 1，min-width: 0也不能省，它是触发 Flex 收缩行为的开关 - 别用
overflow: hidden强行掩盖问题：它只是藏起来，不解决文本撑破布局的根本原因
min-width: 0 不是可选项，是换行和截断能生效的底层开关；而 table-layout: fixed 是表格场景下所有 CSS 溢出控制的前提。这两点一旦漏掉，其他样式再全也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
