是的，text-overflow: ellipsis 默认只对单行生效，需同时满足块级元素、固定宽度（或max-width）、white-space: nowrap 且 overflow: hidden 才能触发省略号显示。
text-overflow: ellipsis 只对单行生效？
是的，text-overflow: ellipsis 默认只在单行文本上起作用。它本身不控制换行，也不限制行数，只是“当内容溢出容器且不可见时，用省略号替代被裁掉的部分”。要让它生效，必须同时满足三个条件：块级元素、固定宽度（或 max-width）、white-space: nowrap。
常见错误是只加了 text-overflow: ellipsis，但忘了设 white-space: nowrap，结果文字照常换行，省略号根本不会出现。
-
overflow: hidden必须设置，否则溢出内容仍可见 -
width或max-width必须明确（百分比、px、rem 都行），不能是auto -
white-space: nowrap是关键，它阻止换行，让文本“挤成一行”再裁
多行文字怎么加省略号？CSS 原生不支持
CSS 标准里没有 text-overflow: ellipsis 的多行版本。所谓“-webkit-line-clamp”方案只是 WebKit 内核的私有属性，display: -webkit-box + -webkit-line-clamp: 2 这套组合在 Safari 和新版 Chrome 有效，但在 Firefox 和部分旧 Edge 中完全失效。
这意味着：如果你需要稳定支持多行省略，不能只靠 CSS。实际项目中更可靠的做法是服务端截断，或前端用 JS 计算字符/像素宽度后手动截取 + 拼接 "…"。
- 纯 CSS 多行省略 =
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp - Firefox 下需额外 JS 回退逻辑，否则显示完整文本或布局错乱
- 响应式场景下，
-webkit-line-clamp对字体缩放、字号变化不敏感，容易在小屏多截或少截
为什么设置了 ellipsis 却没反应？检查这三点
最常卡在这几个地方，不是语法错，而是上下文约束没满足：
- 父容器是
inline元素（比如）→ 改成display: block或inline-block - 用了
flex布局但没设flex-shrink: 0或容器min-width: 0→ Flex 项默认会压缩，导致 width 计算异常 - 文字里含空格或连字符（如 URL、邮箱）→ 浏览器可能在中间断行，
white-space: nowrap能强制不断，但长单词仍可能撑破容器；此时可加overflow-wrap: anywhere或word-break: break-all辅助
性能和可访问性容易被忽略的细节
text-overflow: ellipsis 本身开销极小，但它的依赖属性会影响渲染行为。比如 white-space: nowrap 在长文本下可能导致水平滚动条意外出现，而 overflow: hidden 会剪裁所有子元素（包括 tooltip、popper 等绝对定位内容）。
另外，屏幕阅读器通常不会读出省略号，用户也无法复制被裁掉的文字。如果该文本有操作意义（比如文件名、错误码），建议用 title 属性兜底，或改用“展开/收起”交互代替静态截断。
- 避免在
table单元格里直接用 ellipsis，td 默认white-space: normal，且 width 计算复杂，容易失效 - 动画中动态改变 width 时，ellipsis 不会实时重绘，需触发 reflow（例如读取 offsetWidth）
- RTL（从右向左）语言下，省略号位置不变，仍在行尾，符合预期；但若用
direction: rtl+text-align: right混用，需验证对齐一致性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
