text-overflow: ellipsis仅对块级或明确设宽的内联块元素生效，需同时满足white-space: nowrap、宽度限制及溢出条件；原生不支持多行省略，WebKit私有属性存在兼容性限制，Flex中需设min-width: 0才能触发。
text-overflow: ellipsis 只对块级元素生效
直接给 span 或 a 这类内联元素加 text-overflow: ellipsis，基本没反应——它压根不工作。因为这个属性依赖两个前提：内容必须“溢出容器”且“不可换行”，而内联元素默认不形成块格式化上下文，也不限制宽度。
实操建议：
- 确保目标元素是块级（
display: block）或弹性/网格子项（display: inline-block也行，但需明确设宽） - 必须同时设置
white-space: nowrap，否则文本会折行，根本不会触发溢出 - 必须有明确的宽度限制（
width、max-width，或父容器约束），否则没有“溢出”的判定基准
单行省略和多行省略不是一回事
text-overflow: ellipsis 原生只支持单行。想实现三行截断加省略号？CSS 没有标准属性能直接做到，别被某些“伪代码示例”误导。
常见错误现象：照搬 display: -webkit-box + -webkit-line-clamp，结果在 Firefox 或 Safari 新版本里失效，或和 Flex 布局冲突。
使用场景与取舍：
- 纯单行需求：用
text-overflow: ellipsis+white-space: nowrap+ 宽度控制，兼容性好（IE8+） - 需要多行：优先考虑
display: -webkit-box方案，但得接受它仅限 WebKit 内核（Chrome/Safari），且不能和flex同时用在一个元素上 - 要求全浏览器支持多行省略？只能用 JS 测量高度截断，或者服务端预处理文本长度
英文单词和中文混排时省略位置可能异常
比如一段含长英文 URL 的文本，text-overflow: ellipsis 可能会在单词中间砍一刀，显示成 https://exa…，而不是更合理的 https://example.com/very-lo…。这不是 bug，是 CSS 溢出裁剪按字符而非语义单位执行。
原因在于：浏览器裁剪的是渲染后的像素流，不识别单词边界。中英文混排时尤其明显，因为中文每个字等宽，英文连写无空格。
缓解方法：
- 对英文内容加
word-break: break-all（强制断词），但会破坏可读性 - 用
overflow-wrap: break-word（优先在空格/标点处断），更适合混合文本 - 若内容可控，提前在后端或 JS 中按字数/像素截断，再补
…，最稳妥
Flex 容器里 text-overflow 失效的典型原因
把一个 div 设为 display: flex，里面放个 span 并希望它省略，结果没反应——大概率是那个 span 没被限制宽度，Flex 子项默认会伸缩占满可用空间。
关键点：Flex 子项要触发 text-overflow，必须阻止它自动拉伸。
- 给子项加
min-width: 0（重置 flex item 的最小尺寸限制） - 同时加
overflow: hidden和text-overflow: ellipsis - 确保子项本身有
white-space: nowrap，且父容器宽度有限（比如max-width: 300px）
漏掉 min-width: 0 是最常踩的坑，尤其在 React/Vue 组件嵌套中容易忽略。
真正麻烦的从来不是加几行 CSS，而是搞清「谁在控制宽度」「谁在决定换行」「谁在裁剪像素」这三件事之间的耦合关系。稍一错位，省略号就消失得无声无息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
