text-overflow: ellipsis必须同时配合width（或max-width）、white-space: nowrap、overflow: hidden三者才生效，缺一不可；flex/grid中还需加min-width: 0。
text-overflow: ellipsis 单独写完全没用，它只是“省略号开关”，真正起作用的是三个属性的协同：必须同时设 width（或 max-width）、white-space: nowrap、overflow: hidden，且全部写在同一个元素上。
为什么只加 text-overflow: ellipsis 没反应
浏览器根本不会触发截断逻辑——text-overflow 不控制裁剪，只定义“裁剪后怎么显示”。没有 overflow: hidden，文本就完整渲染；没有 white-space: nowrap，文本自动换行，压根不会产生“单行溢出”这个前提。
- 常见现象：
div里文字很长，但没省略号，反而折成两行或撑宽父容器 - 检查 computed 样式时，
white-space可能被 reset 库覆盖成normal，不是预期的nowrap - 用在
span上失效？先加display: block或inline-block，否则width和overflow不生效
Flex 容器里 text-overflow: ellipsis 失效的典型原因
Flex 子项默认有 min-width: auto，会拒绝收缩，导致你写的 width: 200px 被无视，overflow: hidden 实际不起作用。
- 修复方式：给文本容器显式加
min-width: 0 - 更稳妥写法：
flex: 0 1 auto; min-width: 0，避免 Flex 基线拉伸干扰 - 别把
overflow: hidden写在父 Flex 容器上——它不会影响子元素内部的文本渲染逻辑 - Grid 同理，需同时加
min-width: 0和min-height: 0（尤其当内容高度不确定时）
width 必须是明确值，不能靠内容撑开
width: auto、width: fit-content、或者父容器未设宽导致子元素 width 计算为 max-content，都会让 text-overflow: ellipsis 彻底静默。
- 可用的值：
width: 200px、max-width: 50%、width: 12rem—— 关键是浏览器能算出一个确定的像素宽度 - 百分比值依赖父容器有明确宽度，否则仍会退化为
auto - 在响应式布局中，推荐优先用
max-width配合width: 100%，比纯width更健壮
最容易被忽略的其实是 white-space: nowrap 的作用位置——它必须加在**文本直接所在的元素上**，不是外层卡片或标题容器。哪怕只漏掉这一条，其他三样全对也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
