设置 flex-direction: column 后，需将 min-width: 0 改为 min-height: 0，并配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和 max-width 才能实现文本截断；长英文或 URL 还需 word-break: break-word。
flex-direction: column 后 min-width: 0 不再适用
设置 flex-direction: column 后，主轴变为垂直方向，此时约束“收缩底线”的属性不再是 min-width，而是 min-height。浏览器仍会给每个 flex 子项隐式设 min-height: auto，导致即使写了 white-space: nowrap 和 overflow: hidden，文本也拒绝压缩、无法触发截断。
常见现象包括：文字撑高容器、出现纵向滚动条、或直接换行（哪怕你加了 white-space: nowrap）；检查 DevTools 的 Computed 样式，若 min-height 显示为 auto，就是它。
-
min-height: 0必须加在**直接参与 column 排列的子项上**，不是父容器，也不是文本内部的span - 不能写
min-height: 0px或min-height: 0%，部分浏览器不识别，只接受无单位的0 - 如果子项本身是块级文本容器（如
.desc同时有display: flex和直接包文字），它自身也要加min-height: 0，否则截断链中断
white-space: nowrap 在 column 布局中容易被忽略
很多人以为 white-space: nowrap 只防水平换行，其实它在 column 布局下同样关键——它阻止的是**交叉轴方向上的换行**。当主轴是垂直时，交叉轴是水平的，white-space: nowrap 才能确保单行文本不因容器宽度不足而折成多行，从而满足 text-overflow: ellipsis 的前提条件。
漏掉它最常发生在嵌套结构里，比如外层用 flex-direction: column，内层又用了 flex-wrap: wrap 或未重置 white-space，结果文本悄悄换行，省略号彻底失效。
立即学习“前端免费学习笔记（深入）”；
- 必须和
overflow: hidden、text-overflow: ellipsis、min-height: 0写在同一选择器里 - 不要依赖父级设置；
white-space: nowrap必须落在**实际渲染文本的元素上**（如.title、.content） - 若该元素是
span等行内元素，需额外加display: block或display: inline-block
width/max-width 与 height/max-height 的对应关系错乱
在 row 布局中，我们习惯给文本容器设 max-width 来约束横向空间；但切换到 column 后，文本溢出发生在**水平方向（即交叉轴）**，所以起作用的是 max-width，而非 max-height —— 这点反直觉，但很关键。
错误做法是给 column 子项加 max-height: 2em 并期待省略号出现，这完全无效；真正需要的是明确的 width 或 max-width 值（百分比、rem、px 都可），且不能是 auto。
- 若子项用了
flex: 1，请确认其父容器有明确宽度（如width: 300px），否则max-width无参照基准 - 避免用
width: 100%，它在 column 布局中可能受父容器 padding 或 border 影响，计算不稳定 - 更稳妥的是直接设
max-width: 100%，并确保父容器没有overflow: visible向上穿透
含长 URL 或连续英文单词时仍溢出
即使满足 min-height: 0、max-width、white-space: nowrap、overflow: hidden 四条件，纯英文、URL 或无空格字符串（如 https://a.b/c/d/e/f/g/h/i/j/k/l/m/n/o/p/q/r/s/t/u/v/w/x/y/z）仍可能撑破容器——因为浏览器默认按单词整体计算最小尺寸，min-height: 0 对它无效。
此时需补上 word-break: break-word，它允许在长单词内断行（仅在必要时），比 word-break: break-all 更可控，不影响可读性。
-
break-word在 Chrome 15+、Firefox 15+、Safari 9+ 均支持，现代项目可放心用 - 不要加在父容器上；必须和其余四条件同级作用于文本元素
- 若需兼容老 IE（已极少见），可降级为仅靠
min-height: 0+text-overflow: ellipsis，但长 URL 仍大概率失效
min-width → min-height，width 依然管水平尺寸，white-space 依然防交叉轴换行——但交叉轴已从垂直变成水平。漏掉其中任一维度的适配，省略号就静默失效。 
