单行文本省略需同时设置overflow: hidden、text-overflow: ellipsis和white-space: nowrap，并限定容器宽度及块级显示；多行省略需WebKit私有属性或JS处理，常见失效因缺宽度、缺nowrap或flex布局未约束伸缩。
单行文本超出容器宽度时显示省略号，核心是用 overflow、text-overflow 和 white-space 三者配合，缺一不可。
必须设置宽度和块级显示
元素需有明确的宽度（如 width: 200px），且默认为块级或设为 display: block 或 inline-block。内联元素（如 span）不设宽高时无法触发省略逻辑。
关键三属性缺一不可
- overflow: hidden：隐藏溢出内容（省略号本身是“被隐藏部分”的视觉替代）
- text-overflow: ellipsis：指定用省略号代替被截断文本
- white-space: nowrap：强制文本不换行，确保单行截断
多行省略不能只靠这三个属性
纯 CSS 实现多行省略需额外技巧：
– WebKit 内核可用 display: -webkit-box + -webkit-line-clamp（仅限现代 Chrome/Safari）；
– 兼容性要求高时建议用
JavaScript 截取或服务端处理；
– 不推荐用伪元素模拟，易受字体、缩放、中英文混排影响。
常见失效原因排查
- 父容器未设宽，或宽度由内容撑开（如
display: inline） - 遗漏
white-space: nowrap，导致文本自动折行，text-overflow不生效 - 设置了
flex布局但没限制子项伸缩（需加flex-shrink: 0或min-width: 0防止 flex 项强行撑宽）
