text-overflow: ellipsis生效需同时满足white-space: nowrap、overflow: hidden和明确宽度（或max-width），缺一则失效；Flex子项还需额外加min-width: 0。
单行文本溢出不显示省略号，大概率是white-space: nowrap、overflow: hidden、明确宽度三者缺一。
text-overflow: ellipsis 为什么加了没反应
它只在特定条件下生效，不是“开了就管用”：
-
white-space: nowrap必须存在——否则文字自动换行，根本不会触发“溢出” -
overflow: hidden必须显式声明——否则溢出内容直接流出来，text-overflow失效 - 容器必须有可计算的宽度约束：
width、max-width，或来自 Flex/Grid 父容器的有效限制（比如flex-basis或min-width: 0） - 在
display: flex容器中，子项默认min-width: auto，会阻止收缩——得额外加min-width: 0或overflow: hidden
Flex 布局里文字撑破卡片怎么办
这不是文字太长，而是 Flex 子项拒绝收缩：
- 检查子项是否漏了
min-width: 0——这是最常见原因，尤其当内容含长 URL、base64 字符串或未设宽的input - 确认父容器没写死
width（比如width: 550px），这会覆盖响应式逻辑 - 避免在卡片内全局设
white-space: nowrap，除非你真要配text-overflow: ellipsis - 对纯文本内容，优先用
overflow-wrap: break-word而非word-break: break-all——后者会在任意字符间断，中文和数字串会被粗暴切开
图片或媒体内容溢出怎么防
重点不在裁剪，而在尺寸适配：
- 图片统一加
max-width: 100%和height: auto，防止原始尺寸破坏布局 - 用
object-fit: cover或contain控制图像缩放行为，配合width: 100%使用 - 父容器加
overflow: hidden是兜底手段，但不能替代尺寸控制——它只是藏问题，不是解决问题 - 视频、iframe 等嵌入内容同样适用
max-width: 100%，别依赖width="100%"这类 HTML 属性
移动端换行失效，flex-wrap 不起作用
flex-wrap: wrap 不是“智能换行”，它只按规则响应：
- 父容器没设
width或max-width，实际宽度无限大，永远不触发换行 - 某个子项用了
flex: 1却没控宽（比如搜索框），把所有剩余空间吃掉，其他项没空间可挤 - 子项内部有固定宽元素（如
input[type="search"]默认最小宽度约 120px），导致整体无法压缩到可换行尺寸 - 媒体查询里只改了
flex-direction，却忘了重置flex-wrap——nowrap是默认值，不显式写wrap就不会换
真正难处理的是长不可折字符串（比如 token、UUID、URL），它们让所有换行逻辑失效。这时候 overflow-wrap: break-word 无效，word-break: break-all 又太暴力——得结合 hyphens: auto（需语言支持）或 JS 动态插入零宽空格，但那是另一层复杂度了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
