单行文本溢出显示省略号必须同时满足white-space: nowrap、overflow: hidden、text-overflow: ellipsis；缺一不可，因text-overflow是依赖上下文的提示型声明，仅在文本强制单行且溢出被裁剪时生效。

单行文本溢出显示省略号，必须同时满足三个条件：white-space: nowrap、overflow: hidden、text-overflow: ellipsis，缺一不可。

为什么 text-overflow: ellipsis 单独写没用

它不是独立生效的属性，而是依赖渲染上下文的“提示型”声明。浏览器只有在确认文本被强制压成一行（white-space: nowrap），且溢出部分已被裁剪（overflow: hidden）的前提下，才会把末尾替换成…。否则，它就退化为默认值 clip——静默裁切，不提示。

常见错误现象包括：

• 写了 text-overflow: ellipsis 但没加 white-space: nowrap，结果文本照常换行，省略号完全不出现
• 容器是 display: inline 且没设 width，导致 overflow: hidden 失效（inline 元素对 overflow 不敏感）
• 父级用了 word-break: break-all 或 hyphens: auto，干扰了文本流判断，使 text-overflow 失效

white-space: nowrap 是关键触发开关

这个值不只是“不让换行”，它改变了文本的布局行为：让整段文字变成一个不可分割的内联盒子，从而让 overflow 有明确的“溢出边界”可计算。没有它，text-overflow 就像没通电的开关。

注意点：

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

• 某些 CSS 重置库（如 normalize.css）会把 white-space 设为 normal，覆盖你写的 nowrap；调试时务必检查 computed 样式里的实际值
• 如果容器本身是 flex item 或 grid item，white-space: nowrap 仍有效，但需确保其父容器没用 flex-wrap: wrap 把它挤变形
• 不要用 white-space: pre 替代，它保留空格和换行符，破坏单行逻辑

宽度限制必须显式存在

text-overflow 的“溢出”是相对于某个固定尺寸而言的。如果容器宽度由内容撑开（比如 width: auto 且无父级约束），浏览器根本不知道哪算“超出”，自然不会触发省略。

可行的宽度设置方式：

• width: 200px（最直接）
• max-width: 80%（响应式常用）
• inline-block 元素配合 width（避免块级元素独占一行带来的布局干扰）
• 不要依赖 min-width 或 fit-content，它们不提供上界约束

兼容性与边缘情况

现代浏览器（Chrome 4+、Firefox 7+、Safari 3.1+、Edge 12+）都支持这组组合，但仍有几个容易被忽略的点：

• -ms-text-overflow 在 Edge 16+ 已废弃，无需再写
• 如果容器有 border 或 padding，记得用 box-sizing: border-box，否则实际可用宽度会小于你写的 width 值
• 中文/日文等无空格长文本，在某些旧版 Safari 中可能因字体度量差异导致省略号位置偏移，加 line-height 固定行高可缓解
• 想鼠标悬停显示完整内容？补一句 title 属性就行：

  截断文本

真正麻烦的从来不是写这三行 CSS，而是排查哪一行被别的样式悄悄覆盖了——建议从 computed 样式面板里逐项确认 white-space、overflow、width 的最终值。

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