text-overflow: ellipsis必须与white-space: nowrap、overflow: hidden及明确宽度（width/max-width）三者同时使用才生效；缺一不可，否则省略号不显示。

text-overflow: ellipsis 单独写没用，必须和 overflow: hidden、white-space: nowrap、**明确宽度**三者同时存在才生效。

为什么写了 text-overflow: ellipsis 却没效果？

大概率是漏了下面任意一项：

• white-space: nowrap 缺失 → 文本自动换行，根本不会“溢出”
• overflow: hidden 缺失 → 溢出内容直接跑出去，没被裁剪，省略号无从触发
• 容器没设 width 或 max-width → 块级元素默认占满父容器，nowrap 让它无限延展，依然不溢出
• 用在 <span></span> 这类行内元素上 → 默认不响应 width 和 overflow，得先加 display: inline-block 或 display: block

Flex 容器里 text-overflow: ellipsis 失效怎么办？

Flex 子项默认会拉伸或收缩，容易撑开宽度，导致省略逻辑失效。关键要锁住宽度计算：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给子项加 min-width: 0（现代浏览器必需，防止 flex item 忽略 overflow）
• 避免子项设 flex-shrink: 0，否则它拒绝压缩，溢出不触发
• 优先用 max-width 而非 width，尤其在响应式布局中更稳妥
• 如果父容器是 flex 且未设宽，子项的 width: 100% 可能被解析为“尽可能大”，建议显式控制父宽或用 flex-basis

兼容性与常见陷阱

虽然主流浏览器都支持，但几个细节容易翻车：

• IE 需要 -ms-text-overflow: ellipsis 前缀（IE8+），不过现在基本可忽略
• 移动端某些 WebView（如旧版 UC）对 max-width 在嵌套 flex 中的解析异常，建议加 box-sizing: border-box 并检查 padding 是否影响实际可用宽度
• text-overflow 只对**块级/内联块级**元素有效，对 table-cell 或 position: absolute 元素需额外验证
• 不要依赖 text-overflow: clip 做视觉判断——它不显示任何标记，调试时容易误以为“没生效”

真正卡住人的，往往不是属性记不住，而是容器宽度在 flex/grid/百分比嵌套中被悄悄重置了。动手前先用 DevTools 看一眼 computed width 和 overflow 的最终值，比反复改样式更快。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！