单行文本省略必须同时设置text-overflow: ellipsis、white-space: nowrap、overflow: hidden及明确宽度；多行省略依赖-webkit-line-clamp组合（display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden），但仅Chrome/Safari稳定支持，Firefox及部分新版Safari兼容性差。
单行文本能直接用 text-overflow: ellipsis，多行必须靠 -webkit-line-clamp，且后者只在 Chrome/Safari 里稳定生效；Firefox 和新版 Edge 基本不认它。
单行省略：三个属性缺一不可
很多人加了 text-overflow: ellipsis 却没效果，问题几乎都出在这三点没配齐：
-
white-space: nowrap—— 不设这个，文本自动换行，根本不会“溢出” -
overflow: hidden—— 不设这个，超出部分直接露出来，不触发裁剪逻辑 - 容器必须有明确宽度 ——
width、max-width或父容器约束（比如 Flex 里没设min-width: 0，子项会撑宽）
内联元素如 默认不响应 text-overflow，得先加 display: inline-block 或 display: block。另外，IE8+ 支持原生 text-overflow，但旧 IE 需补 -ms-text-overflow: ellipsis。
多行省略：-webkit-line-clamp 是唯一纯 CSS 路径
标准 CSS 没有多行省略的原生方案。-webkit-line-clamp 是 WebKit 私有属性，依赖整套组合：
-
display: -webkit-box—— 必须用这个 display 值，flex或grid会直接失效 -
-webkit-box-orient: vertical—— 方向必须是 vertical，写成horizontal就白搭 -
-webkit-line-clamp: 2—— 数字填你要截的行数，不是高度值 -
overflow: hidden—— 同样不能少，否则内容照常溢出
注意：text-overflow: ellipsis 在多行场景下只是个摆设，起作用的是 -webkit-line-clamp 本身。另外，如果容器用了 flex 布局，子元素必须加 min-width: 0，否则它会拒绝收缩，导致省略不触发。
中英文混排时省略位置不准怎么办
浏览器按像素流裁剪，不识别单词边界。长 URL 或连续英文字符容易被中间砍断，比如 https://exa…。这不是 bug，是机制使然：
-
word-break: break-all强制断词，但会把hello-world拆成hel…，可读性差 -
overflow-wrap: break-word更友好，优先在空格、斜杠、连字符处断，适合混合文本 - 真正可控的方式是后端或 JS 提前按字符数/字节数截断，再手动加
…—— 尤其对 SEO 敏感或需复制完整链接的场景
最后提醒一句：-webkit-line-clamp 在 Firefox 全系、部分新版 Safari（如 iOS 17+ 某些 Webview）里表现不稳定，真要全平台保底，JS 测高截断仍是目前最靠谱的 fallback 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
