text-overflow: ellipsis生效需同时满足四条件：块级元素、white-space: nowrap、overflow: hidden、明确宽度约束；Flex/Grid子项还需额外加min-width: 0，缺一则被浏览器静默忽略。
text-overflow: ellipsis 为什么加了没效果
根本原因不是写错了属性，而是它只对「溢出被裁剪」的块级元素起作用——white-space: nowrap、overflow: hidden、明确宽度约束三者缺一不可。
常见错误现象：text-overflow: ellipsis单独加在p或div上，文字照常换行或撑开容器，末尾毫无省略号。
-
white-space: nowrap必须设置，否则文字自动换行，根本不会“溢出” -
overflow: hidden必须设置，否则溢出内容直接显示出来 - 容器必须有明确宽度约束（
width、max-width、或父容器flex/grid限制），不能是width: auto且无布局约束 - 若作用于
span等内联元素，需先设display: inline-block或block，否则overflow无效
Flex 布局中单行省略失效怎么办
Flex 子项默认min-width: auto，会阻止收缩，导致即使写了white-space: nowrap和overflow: hidden，文字仍不触发省略。
使用场景：卡片标题、列表项名称这类需要固定宽度 + 单行截断的 UI 元素，在display: flex容器中很常见。
- 给需要省略的子元素加
min-width: 0（推荐）或overflow: hidden（旧版 Safari 更可靠） - 确保父容器没用
flex-wrap: wrap干扰单行逻辑 - 避免同时设
flex: 1又不控宽——它会让子项尽可能撑满，失去截断前提 - 响应式中优先用
max-width: 100%而非width: 100%，防止在窄屏下被父容器拉伸变形
长不可折字符串（URL/Token/邮箱）导致省略失效
英文、数字连串不换行，浏览器默认不断行，容器宽度不够时直接溢出边界，text-overflow完全不触发。这不是ellipsis的问题，而是文本本身缺乏换行机会。
-
overflow-wrap: break-word（等价于word-wrap: break-word）是首选：在单词内断行，但尽量保持语义完整 -
word-break: break-all慎用：强制在任意字符间断开，可能把example.com劈成exa…，影响可读性 - 若需保留 URL 可点击性，建议配合
text-decoration: underline和cursor: pointer，再用overflow-wrap兜底
多行省略依赖 -webkit-line-clamp，但别当它是标准
-webkit-line-clamp不是标准属性，现代浏览器（Chrome 63+、Firefox 68+、Safari 7.1+、Edge 16+）基本可用，但行为细节容易踩坑。
- 必须配合
display: -webkit-box和-webkit-box-orient: vertical，与display: flex混用会冲突 - Firefox 支持无前缀的
line-clamp（需layout.css.line-clamp.enabled开启，默认已开），但不支持-webkit-前缀版本 -
text-overflow: ellipsis在多行场景中实际不需要，-webkit-line-clamp自身已处理截断与省略号渲染 - 无法与
text-align: justify共存，末行对齐会错乱；若需两端对齐，得放弃line-clamp改用 JS 或伪元素模拟
复杂点往往不在属性本身，而在它所处的上下文：Flex 的默认最小宽度、内联元素的渲染规则、长单词的断行策略、WebKit 与标准 CSS 的渐进差异。漏掉其中任一环，ellipsis 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
