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 容器中很常见。
- 给需要省略的子元素加
min-width: 0（或overflow: hidden，后者在部分旧版 Safari 中更可靠） - 确保父容器没用
flex-wrap: wrap干扰单行逻辑 - 避免同时设
flex: 1又不控宽——它会让子项尽可能撑满，失去截断前提
多行省略用 -webkit-line-clamp 真实兼容性如何
它不是标准属性，但现代浏览器（Chrome 63+、Firefox 68+、Safari 7.1+、Edge 16+）基本可用；真正问题在语义和行为细节。
性能影响小，但容易踩坑：它依赖 display: -webkit-box 这套老式弹性盒，和现代 display: flex 混用会冲突。
- 必须配合
display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden -
line-clamp值为0或负数时表现不一致，建议只用正整数 - Firefox 仅支持标准语法
line-clamp（无前缀），但需开启layout.css.line-clamp.enabled（默认已开） - 无法与
text-align: justify配合，末行对齐会错乱
英文/数字连串不换行导致 ellipsis 失效
比如 URL、token、长邮箱地址，浏览器默认不断行，容器宽度不够时直接溢出容器边界，text-overflow 完全不触发。
这不是 ellipsis 的问题，而是文本本身缺乏换行机会。
- 加
word-break: break-all强制断字（慎用：可能把单词从中间劈开） - 更推荐
overflow-wrap: break-word（等价于word-wrap: break-word），只在必要时才折行 - 若内容可控，后端或 JS 层插入零宽空格
到长字符串中，比纯 CSS 更精准
min-width: 0 和 overflow-wrap 这两个点——前者让 flex 下 ellipsis 归位，后者让长不可断字符串真正参与截断。其他都是按条件补全即可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
