text-overflow: ellipsis需配合overflow: hidden和white-space: nowrap才能实现单行省略，缺一不可；多行省略须用-webkit-line-clamp组合或max-height+line-height方案。
text-overflow: ellipsis 只对单行生效，多行裁剪必须绕开它；想不加省略号直接截断，靠 line-height × 行数 + overflow: hidden 控高最稳。
单行文本裁剪为什么必须配 white-space: nowrap
因为 text-overflow 的作用前提是“内容不换行但超出容器”，否则浏览器会先折行，text-overflow 就没机会触发。常见错误是只写了 overflow: hidden 和 text-overflow: ellipsis，却漏了 white-space: nowrap，结果文本照常换行，省略号完全不出现。
-
width或max-width必须显式设置，否则容器宽度由内容撑开，无溢出可言 -
overflow值不能是visible或scroll，必须是hidden（auto在某些场景下也不可靠） -
text-overflow: clip也能裁剪，但不显示任何提示，适合后台数据展示等无需用户感知的场景
多行裁剪用 -webkit-line-clamp 时哪些属性缺一不可
这个方案在 Chrome/Safari/Edge 新版中可用，但不是“设个 -webkit-line-clamp: 2 就完事”。它依赖一套盒模型组合拳，漏掉任意一个，整个截断就失效。
- 必须同时声明：
display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden -
-webkit-line-clamp只接受整数，不能是calc()或 CSS 变量（即使变量值是整数） - 别加
text-overflow: ellipsis——它不仅无效，还可能在字体加载未完成时造成首行渲染错位 - 如果父容器有
padding或border，记得设box-sizing: border-box，否则实际可用高度会缩水
不想显示省略号？用 max-height + line-height 精确控高
这是兼容性最好、行为最可控的多行裁剪方式，尤其适合需要统一视觉节奏、且不希望用户误判“还有更多内容可点”的场景。
-
line-height必须是固定值（如1.4em、20px），不能用normal或百分比，否则无法准确计算高度 -
max-height = line-height × 行数，例如 3 行 × 1.5em =4.5em - 必须设
overflow: hidden，否则高度限制形同虚设 - 避免用
height，它会强制拉伸或压缩行高，破坏文字基线对齐
Firefox 和旧版 Edge 里 -webkit- 前缀为何完全不生效
因为 -webkit-line-clamp 是 WebKit 内核专属实现，Firefox 从 68+ 开始才通过 @supports 识别该属性（实际仍走回退逻辑），而旧版 Edge（EdgeHTML）根本不支持。所以不能只靠前缀赌兼容性。
- 推荐用
@supports (-webkit-line-clamp: 3)做渐进增强，现代浏览器走弹性盒方案，老浏览器降级到max-height方案 - 不要在
display: block元素上尝试-webkit-line-clamp，它只对-webkit-box生效 - 真要全兼容又带省略号，目前没有纯 CSS 通解——要么 JS 动态截断，要么服务端预处理
最易被忽略的是：所有方案都要求文本内容本身不能含强制换行符（<br> 或 \n），否则 white-space 或 -webkit-box 的布局逻辑会被打断，裁剪位置完全不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
