先记住这个答案
需要三行：white-space: nowrap 让文字不换行，这样才会横向溢出；overflow: hidden 把溢出部分裁掉；text-overflow: ellipsis 在裁剪的位置显示省略号。另外还有一个隐含条件，元素必须是块级或 inline-block，并且宽度是确定的，比如写死的 width、max-width，或者被父容器限制住。三行各管一段，少哪一行都不会出省略号。
- 单行省略需不换行、裁剪和标记
- 文本盒还需要受约束宽度
- flex 子项要加
min-width: 0才能收缩 text-overflow写在溢出的那个容器上，不继承
标准写法
这是业务里最常见的列表标题省略。
.title {
width: 200px; /* 或 max-width，或由父容器限制，宽度必须有上限 */
white-space: nowrap; /* 1. 不换行，文字才会超出 200px */
overflow: hidden; /* 2. 裁掉超出部分 */
text-overflow: ellipsis; /* 3. 在裁剪处画省略号 */
}
/* 效果：一段很长很长的标题文… */很多团队会把这几行封装成一个工具类，Tailwind 里对应的就是 truncate。另外建议给元素加上 title 属性，鼠标悬停时能看到完整文字。
每一行去掉会怎样
理解这三行最直接的办法，是挨个去掉看效果。
去掉 white-space: nowrap，文字会正常换行，200px 宽装不下就往下折，高度变高，横向从来没超出过，也就没有需要省略的地方。
去掉 overflow: hidden，文字确实超出了 200px，但默认 overflow: visible 会让它直接画到盒子外面。规范规定 text-overflow 只在内容被裁剪时起作用，所以不会出现省略号。
去掉 text-overflow: ellipsis，文字超出后被硬生生切掉，末尾可能只剩半个字，看不出后面还有内容。
写全了还不生效的几种情况
线上遇到最多的，其实是三行都写了却没有省略号，原因几乎都出在宽度上。
- flex 子项默认不肯缩小
- 在 flex 布局里，左边头像、右边标题这种结构，给标题写了三行，结果标题把整行撑宽，省略号不出现。原因是 flex 子项默认
min-width: auto，最小宽度等于内容宽度，一行不换的长文字就是它的最小宽度，所以它不会收缩。给标题加min-width: 0，或者flex: 1配min-width: 0，就能正常收缩出省略号。grid 子项也是同样的道理。 - 行内元素没有宽度
span、a默认是display: inline，width对它们无效，overflow也不起作用。要改成display: block或inline-block才行。- 写在了外层而不是溢出的那层
text-overflow不继承，要写在真正发生溢出、同时设置了overflow: hidden的那个元素上。写在外层容器上，里面的子元素照样被硬切。
容易答错的地方
- 以为
text-overflow: ellipsis一行就能搞定 text-overflow本身只负责「怎么显示被裁掉的部分」，它既不会阻止换行，也不会裁剪。必须由nowrap制造溢出，hidden完成裁剪，它才有东西可处理。- 以为
overflow: hidden可以换成别的值 overflow: auto或scroll也算裁剪，省略号能显示，但会多出滚动条。overflow: clip同样可以。一般还是用hidden，面试时说清楚要求是「非visible」更准确。
面试官还会怎么问？
多行省略怎么写？
用 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2 再加 overflow: hidden。虽然带 -webkit- 前缀，但主流浏览器都支持，是目前最常用的方案。不需要 white-space: nowrap，因为多行本来就要换行。
省略号能放在开头，显示文件名的结尾吗？
text-overflow 的省略号出现在行的结束方向。把元素设为 direction: rtl，省略号就会跑到左边，保留结尾，适合显示长路径。但这会影响标点和英文的显示顺序，更稳妥的做法是用 JavaScript 截断，或者把文件名和扩展名拆成两个元素。
怎么判断文字是否真的被省略了，好决定要不要显示 Tooltip？
比较元素的 scrollWidth 和 clientWidth，scrollWidth 大于 clientWidth 说明内容溢出，出现了省略号。antd 的 Typography 组件的 ellipsis 配置就是基于类似的检测来决定是否显示提示。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。