text-overflow: ellipsis 必须配合 width、white-space: nowrap（单行）或 display: -webkit-box（多行）、overflow: hidden 才生效；三者缺一不可，且需注意 flex 容器 min-width、字体混排等细节问题。
text-overflow: ellipsis 必须配合 width 和 overflow 才生效
单独写 text-overflow: ellipsis 没用，浏览器根本不会触发省略逻辑。它只是“告诉浏览器：真要截断时，用省略号”，但不控制“什么时候算截断”。
必须同时满足三个条件：
-
width或max-width有确定值（不能是auto或百分比未受限的父容器） -
white-space: nowrap（单行省略）或display: -webkit-box（多行） -
overflow: hidden（隐藏溢出内容，否则省略号不显示）
常见错误：父容器用了 flex 但没设 min-width: 0，导致子元素 width 计算异常，text-overflow 失效。
单行省略的最小可靠写法
这是经过大量兼容性验证的写法，IE11+、Chrome、Firefox、Safari 都支持：
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意点：
-
width值必须是具体像素或固定内联尺寸；用%时，父容器需有明确宽度 -
white-space: nowrap是关键，否则文字换行，text-overflow不触发 - 不要加
display: inline-block等额外包裹——除非你明确需要它带来的盒模型变化
多行省略只能靠 -webkit-line-clamp（且仅 WebKit 内核稳定）
CSS 标准至今没有原生多行省略属性，-webkit-line-clamp 是事实标准，但只在 Chrome/Safari/Edge（Chromium 内核）中可靠，Firefox 不支持。
典型写法：
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
必须配套：
-
display: -webkit-box（不能用flex替代） -
-webkit-box-orient: vertical（方向必须是 vertical） - 不能设
height或max-height（会干扰行数计算） - 若父容器有
padding，需通过box-sizing: border-box保证高度精确
中文/英文混排下省略位置可能偏移
当文字含中英文、数字、标点混合时，text-overflow: ellipsis 截断点未必在视觉“末尾”，尤其在 font-family 切换或使用等宽字体时。
原因：浏览器按字符宽度累加判断是否溢出，而中英文字符实际渲染宽度不同，且某些字体对全角/半角处理不一致。
缓解方式：
- 统一使用支持良好排版的字体栈，如
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif - 避免在省略容器内嵌套
span改变局部字体或字号 - 测试时用真实数据（含长英文单词、URL、emoji），别只用“测试测试测试”这种纯中文占位符
真正难调的是嵌套 flex + 文字省略 + 动态宽度的组合场景——那里 width 计算链太长，一个没锁死就会连锁失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
