为什么CSS Flex布局中设置flex-direction: column后省略号失效？-css教程-PHP中文网

设置 flex-direction: column 后，需将 min-width: 0 改为 min-height: 0，并配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 和 max-width 才能实现文本截断；长英文或 url 还需 word-break: break-word。

为什么css flex布局中设置flex-direction: column后省略号失效？

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，结果文本悄悄换行，省略号彻底失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须和 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 更可控，不影响可读性。