text-overflow: ellipsis 加了没效果，根本原因是它仅对「溢出被裁剪」的块级元素生效，必须同时满足：white-space: nowrap、overflow: hidden 和明确宽度约束（如width/max-width或flex中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且无布局约束
Flex 布局里单行省略失效怎么修
Flex 子项默认 min-width: auto，会阻止收缩，导致即使写了 white-space: nowrap 和 overflow: hidden，文字仍不触发省略。
使用场景：卡片标题、列表项名称这类需要固定宽度 + 单行截断的 UI 元素，在 display: flex 容器中很常见。
- 给子元素加
min-width: 0（推荐）或overflow: hidden（副作用小） - 不要只依赖
flex: 1，它隐含min-width: auto - 若父容器是
flex且设了width，子项需同时满足宽度约束 +min-width: 0
-webkit-line-clamp 多行截断兼容性坑点
这个属性只在基于 WebKit/Blink 的浏览器（Chrome、Safari、Edge）中可靠工作，Firefox 完全不支持，且属于非标准属性。
典型写法必须配齐四条：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
- 漏掉
display: -webkit-box或-webkit-box-orient: vertical，整个截断就无效 -
line-clamp数值为1时，行为和text-overflow: ellipsis不等价，它仍走多行逻辑，性能稍差 - 响应式场景下，
line-clamp值无法用媒体查询动态切换（CSS 不支持条件赋值）
长不可折字符串（如 URL）溢出怎么处理
中文、英文单词可由 word-break 或 overflow-wrap 控制换行，但纯连续无空格字符串（比如 https://a.b.c/very/long/path）需要更激进策略。
- 优先用
overflow-wrap: break-word（或旧名word-wrap: break-word），它只在必要时断行，语义保留较好 - 强求任意位置断开可用
word-break: break-all，但会把 “hello” 拆成 “hel” + “lo”，慎用于用户可见文案 - 若同时要多行省略 + 断长串，得组合使用：
overflow-wrap: break-word+-webkit-line-clamp，但 Firefox 下后者失效，需降级为纯换行
最易被忽略的是：这些断行属性对 white-space: nowrap 无效——两者互斥。要换行就不能禁换行，要省略号就得禁换行，得按需取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
