17370845950

单行文本省略需同时设置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 项强行撑宽）