text-overflow: ellipsis仅对单行有效，必须同时满足white-space: nowrap、overflow: hidden和明确宽度（如width或max-width）三个条件才能生效；多行省略需用-webkit-line-clamp配合display: -webkit-box、-webkit-box-orient: vertical和overflow: hidden实现。
text-overflow: ellipsis 能用，但必须配齐其他条件，否则无效。
单行省略必须同时满足三个条件
只写 text-overflow: ellipsis 不会生效——它本身不控制换行或裁剪，只是“告诉浏览器溢出时怎么显示”。真正起作用的是三者协同：
-
white-space: nowrap：强制文本不折行，否则内容直接换到下一行，根本不会触发“溢出” -
overflow: hidden：创建裁剪边界，没有它，文字会直接撑出容器 -
width或max-width：容器必须有明确宽度限制，100%也行，但父级不能是width: auto且无约束的 flex item
常见错误现象：ellipsis 不显示，或只在部分浏览器生效（如 IE 需加 -ms-text-overflow: ellipsis）；表格中失效——此时要加 table-layout: fixed 并给 td 设 width。
多行省略靠 -webkit-line-clamp，但不是所有浏览器都认
Chrome、Safari、Edge（新版）支持 -webkit-line-clamp，Firefox 和旧版 Edge 完全不识别。用之前先确认目标环境：
-
display: -webkit-box是前提，不能用flex或block -
-webkit-box-orient: vertical必须写，漏掉就变成横向截断 -
-webkit-line-clamp: 2的值是整数，不能是2.5或变量 - 高度需手动估算：比如
line-height: 1.5em× 行数，否则可能截不干净或留白过多
示例中常漏掉 overflow: hidden，导致末尾省略号不出现；也有人误把 text-overflow: ellipsis 当成多行必需项——它对多行实际无效，纯属冗余。
Flex/Grid 容器里单行省略容易失效
Flex item 默认有 min-width: auto，会阻止 width: 100% 生效，导致省略逻辑被绕过：
- 解决方法：给需要省略的元素加
min-width: 0（Flex）或min-inline-size: 0（Grid） - 如果父级是
display: grid且列宽设为1fr，子元素仍需显式声明width: 0或overflow组合才可靠 - 避免嵌套多个
flex层级——每层都可能重置min-width，调试时建议用浏览器 devtools 检查 computed width 是否为预期值
别依赖纯 CSS 做精确行高控制
多行省略本质是“按行数截”，不是“按像素高度截”。字体差异、字号缩放、系统字体替换都会导致实际行高浮动：
- 同一段文字，在 macOS 上可能占 3 行，在 Windows 上占 4 行
-
line-height设为normal时，不同浏览器渲染结果不一致 - 用户开启系统级字体放大（如 Windows 的 125% 缩放），
-webkit-line-clamp可能突然多出半行空白
真正稳定的方案是服务端截断 + 前端 fallback，或者 JS 动态计算（如 clamp.js）。CSS 方案适合对一致性要求不高的展示场景，比如卡片标题、列表摘要——只要用户知道“还有更多”，就不必苛求像素级精准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
