text-overflow: ellipsis生效需同时满足white-space: nowrap、overflow: hidden和明确宽度约束Flex布局中还需设置min-width: 0或overflow: hidden多行省略依赖-webkit-line-clamp及配套属性长不可折字符串需配合overflow-wrap: break-word。text-overflow:ellipsis 为什么加了没效果根本原因不是写错了属性而是它只对「溢出被裁剪」的块级元素起作用——white-space、overflow、width或 max-width三者缺一不可。常见错误现象text-overflow: ellipsis 单独加在 p 或 div 上文字照常换行或撑开容器末尾毫无省略号。white-space: nowrap 必须设置否则文字自动换行根本不会“溢出”overflow: hidden 必须设置否则溢出内容直接显示出来容器必须有明确宽度约束width、max-width、或父容器 flex/grid 限制不能是 width: auto 且无布局约束单行省略在 Flex 布局里失效怎么办Flex 子项默认 min-width: auto会阻止收缩导致即使写了 white-space: nowrap 和 overflow: hidden文字仍不触发省略。使用场景卡片标题、列表项名称这类需要固定宽度 单行截断的 UI 元素在 display: flex 容器中很常见。立即学习“前端免费学习笔记深入” 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。